反应DrawerLayoutAndroid和Navigator之间的本机冲突

tt9

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

tt9

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

以编程方式反应本机打开DrawerLayoutAndroid

来自分类Dev

以编程方式反应本机打开DrawerLayoutAndroid

来自分类Dev

“反应本机束”和“反应本机解束”之间有什么区别?

来自分类Dev

反应本机和WMS

来自分类Dev

反应navigator.replace()的本机过渡动画

来自分类Dev

在屏幕之间反应本机导航

来自分类Dev

Navigator和AsyncStorage响应本机

来自分类Dev

反应本机redux和ListView

来自分类Dev

反应本机分页和反应导航问题

来自分类Dev

在调试模式和普通模式react-native之间反应本机的不同行为”:“ 0.60.4

来自分类Dev

qDebug和SDL之间的冲突

来自分类Dev

jQuery和Bootstrap之间的冲突

来自分类Dev

AngularJS和Thymeleaf之间的冲突

来自分类Dev

freefem ++和fglrx之间的冲突

来自分类Dev

反应本机和应用内购买?

来自分类Dev

反应本机,flex和width父元素

来自分类Dev

反应本机弹性和布局问题

来自分类Dev

反应本机响应边距和填充

来自分类Dev

在本机/反应中过滤和映射

来自分类Dev

使用iOS和domStorage反应本机WebView

来自分类Dev

按钮宽度和半径与本机android反应

来自分类Dev

如何在本机反应中管理父子之间的多个引用?

来自分类Dev

在兄弟姐妹之间传递数据| 反应本机

来自分类Dev

$ cordovaCamera和navigator.camera之间的区别

来自分类Dev

熊猫和单元测试之间的冲突?

来自分类Dev

Mailgun和MailChimp之间的DKIM冲突

来自分类Dev

CodeMirror和Bootstrap 2.3之间的Textarea冲突

来自分类Dev

StaticWriter和Writer类之间的冲突

来自分类Dev

Mootols和Ajax脚本之间的冲突