【问题标题】:how to use tabbar in navigator in react-native如何在反应原生的导航器中使用标签栏
【发布时间】:2016-10-20 01:13:41
【问题描述】:

我现在遇到了这个问题。

因为有些屏幕不使用标签栏,而且我需要在导航栏中使用矢量图标,而不是使用 react-native-tabbar-navigator,所以我尝试在导航器中使用标签栏,如下所示。

render() {
  return (
      <Navigator
        initialRoute={{name: 'LearningList', index: 0}}
        renderScene={(route, navigator) =>
          {
            if (route.name == 'LearningList') {
              return (
                <LearningList navigator={navigator} />
              );
            }
            if (route.name == 'MyLearning') {
              return (
                <View style={{ flex: 1, }}>
                  <MyLearning navigator={navigator} />
                  <TabBarIOS
                    tintColor="black"
                    barTintColor="#3abeff">
                    <Ionicon.TabBarItemIOS
                      style={ styles.tabBarItem }
                      selected={false}
                      iconName='ios-search'
                      title='Explorer'
                      navigator={navigator}
                      onPress={ this.changeTabSelection('LearningList') }>
                      <View></View>
                    </Ionicon.TabBarItemIOS>
                    <Ionicon.TabBarItemIOS
                      style={{ backgroundColor: 'green' }}
                      selected={true}
                      iconName='ios-list-outline'
                      title='My Learning'
                      navigator={navigator}
                      onPress = { this.changeTabSelection('MyLearning') }>
                      <View></View>
                    </Ionicon.TabBarItemIOS>
                  </TabBarIOS>
                </View>
              );
            }
            if (route.name == 'Schedule') {
              return (
                <Schedule navigator={navigator} learningID={ route.learningID } />
              );
            }            
          }
        }
      />
  );
}

但是当我单击 TabBarItemIOS 按钮时,根本不会调用 onPress 事件,如果我单击 LearningList 页面中的编辑按钮,则会为所有 TabBarItemIOS 按钮调用 onPress 回调。

这是 LearningList.js 的下一步按钮内容。

const rightButtonConfig = {
   title: 'Next >',
   handler: () => {
    this.props.navigator.push({
     name: 'MyLearning'
    });
   }
  };

所以,我希望知道在 Navigator 中使用 tabbar 的正确方法。

请帮帮我!!!

【问题讨论】:

  • 你是在 react native android 中发送标签导航器的链接吗???我需要它我尝试创建标签导航器但如果你告诉 mw 失败

标签: react-native tabbar navigator


【解决方案1】:

这是因为您正在调用该函数而不是传递函数引用。要做你想做的,你只需要箭头函数。例如替换:

onPress={ this.changeTabSelection('LearningList') }>

onPress={ () => this.changeTabSelection('LearningList') }>

【讨论】:

  • 先生,我想在 react native android 中创建标签导航器,如果你有的话,请给出代码
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-17
  • 2018-07-11
  • 1970-01-01
  • 1970-01-01
  • 2021-10-17
  • 2018-06-01
相关资源
最近更新 更多