React DrawerLayoutAndroid 和 Navigator 之间的原生冲突
React Native conflict between DrawerLayoutAndroid and Navigator
我正在用 React Native 专门为 Android 编写一个应用程序,我相信 Navigator 组件和 DrawerLayoutAndroid 组件之间存在冲突。
在我的index.android中.js我在render方法中有以下导航器,DrawerLayoutAndroid组件包含一个NavigationPane组件,该组件只是用户可以导航到的页面列表。
class App extends Component {
_renderScene(route, navigator){
var Component = route.component;
return(
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => <NavigationPane navigator={navigator} route={route} />}>
<ScrollView>
<Component {...route.props}
navigator={navigator}
route={route}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
</ScrollView>
</DrawerLayoutAndroid>
)
}
render() {
return (
<Navigator
initialRoute={{ component: LocalExpenseDisplay, name:'Home', index: 0}}
renderScene={this._renderScene}
/>
);
}
}
每当我将新场景推送到导航器堆栈上时,新页面都会呈现良好,但是当我尝试从新页面中提取 DrawerLayoutAndroid 时,它也会拖动新页面并将其从堆栈中弹出。显示DrawerLayoutAndroid组件,但我也被带回了初始页面。
有没有办法在每个页面上都有DrawerLayoutAndroid,而不会在我尝试访问它时从堆栈中弹出新页面?
编辑:以下是导航窗格组件将页面推送到堆栈的方式:
var NavigationPane = React.createClass({
goToPage: function(data){
var route = this.props.route;
if(route.name != data.name){
var nextIndex = route.index + 1;
this.props.navigator.push({
name: data.name,
index: nextIndex,
component: data.component
});
}
},
getInitialState: function(){
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(_navigationMenu),
};
},
render: function(){
return (
<ScrollView contentContainerStyle={AppStyles.navigationPane}>
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>{
return (
<View style={AppStyles.navItemContainer}>
<TouchableHighlight
style={AppStyles.navItemButton}
onPress={this.goToPage.bind(null, data)}>
<Text style={AppStyles.navItemText}>
{data.name}
</Text>
</TouchableHighlight>
</View>
);
}}
/>
</ScrollView>
);
}
});
_navigationMenu数组只是一个带有名称的对象列表,以及要渲染的 React 组件。
ReactJs 还没有太多的文档,但这为我解决了问题。将configureScene
道具添加到导航器(其中手势为空的对象)将阻止导航器应用任何类型的默认手势导航。
render() {
return (
<Navigator
initialRoute={{ component: LocalExpenseDisplay, name:'Home', index: 0}}
renderScene={this._renderScene}
configureScene={() => ({ ...Navigator.SceneConfigs.FloatFromBottom, gestures: {}})}
/>
);
}
相关文章:
- Javascript-ID冲突的几率
- js代码从jQuery转换为原生代码
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- Pg承诺性能提升:在冲突中
- 数据与Javascript中的继承冲突
- Angular ng控制器与ng应用程序冲突
- Chrome原生拖放相对容器并不能正确渲染重影
- 返回按钮代码段的Jquery冲突
- 调试一个简单的jQuery函数;想知道是否与其他代码冲突
- 使用JavaScript和HTML5画布进行冲突检测
- javascript对象原型与jquery冲突
- jQuery与导航菜单上的mouseover事件冲突.
- 原生脚本无限翻译动画
- Javascript滑块不滑动,如何判断是否存在JS冲突
- Bing语音和Bing地图在Windows 8应用商店应用程序中冲突
- Javascript两个日期选择器冲突
- Sequelize:属性之间的命名冲突'播放列表'以及关联'播放列表'
- 2D Processingjs游戏中的冲突
- 单击<视频>与Firefox冲突'他的原生行为
- React DrawerLayoutAndroid 和 Navigator 之间的原生冲突