Question

我正在为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组件。

Answer 1

ReactJs还没有太多的文档，这对我来说解决了这个问题。向导航器添加configureScene道具，其中手势为空对象将阻止导航器应用任何类型的默认手势导航。

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

在DrawerLayoutAndroid和Navigator之间发生本机冲突

1 个答案: