javascript - react DrawerLayoutAndroid和Navigator之间的 native 冲突

我正在用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，而在尝试访问它时不会从堆栈中弹出新页面？

编辑：这是NavigationPane组件将页面推入堆栈的方式：

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组件。

最佳答案

还没有太多关于ReactJ的文档，但是这为我解决了这个问题。在手势为空对象的导航器中添加configureScene道具将阻止导航器应用任何默认手势导航。

render() {
    return (
        <Navigator
          initialRoute={{ component: LocalExpenseDisplay, name:'Home',  index: 0}}
          renderScene={this._renderScene}
          configureScene={() => ({ ...Navigator.SceneConfigs.FloatFromBottom, gestures: {}})}
        />
    );
}