javascript - React Native DrawerLayoutAndroid 和 Navigator 之间的冲突

Question

我正在用 React Native 专门为 Android 编写一个应用程序，我相信 Navigator 组件和 DrawerLayoutAndroid 组件之间存在冲突。

在我的index.android.js中，我的渲染方法中有以下导航器，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 组件。

Answer 1

目前还没有太多关于 ReactJs 的文档，但这解决了我的问题。将 configureScene 属性添加到手势为空对象的导航器将阻止导航器应用任何类型的默认手势导航。

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