React DrawerLayoutAndroid 和 Navigator 之间的原生冲突

React Native conflict between DrawerLayoutAndroid and Navigator

本文关键字:原生 冲突 之间 Navigator DrawerLayoutAndroid React      更新时间:2023-09-26

我正在用 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: {}})}
        />
    );
}