react native android使用react-native-tab-navigator来做底部导航tabbar（2）一个坑：navigator

最新推荐文章于 2024-05-16 01:36:19 发布

原创最新推荐文章于 2024-05-16 01:36:19 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #react #native #tabbar #navigator

我的react native学习之路专栏收录该内容

2 篇文章

订阅专栏

本文解决了一个在使用TabNavigator时遇到的常见问题，即子页面中无法获取navigator的情况。通过在子页面节点上添加navigator属性，可以成功解决此问题并实现界面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

navigator是用来实现界面跳转的，这个资料网上很多，就不多说了，但是我在TabNavigator的子页面里碰到一个大坑，发现无法在子页面中获取到navigator，用

        this.props.navigator.push({name:"login"});

的方法来跳转，一直报错：undefined is not an object (evaluating ‘this.props.navigator.push’)
经过一番辛苦的goole，终于找到了解决方法，原来是要在那个字页面节点上添加 navigator={this.props.navigator} 这个，如：

<TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent navigator={this.props.navigator}/>
                    </TabNavigator.Item>