如何在React Native中使用RkTabView设置活动标签

时间:2018-08-06 21:51:21

标签: reactjs react-native

我正在使用Kitten Tricks RN开发一个应用程序。 我是React Native的初学者,所以页脚栏有问题。 enter image description here

在屏幕截图上,当前该屏幕用于第二个选项卡。因此应该激活第二个选项卡,但是如您所见,第一个选项卡现在仍处于活动状态。 如何将第二个标签页设置为活动页面?

这是代码部分。

   <View style={styles.footerbar}>
      <RkTabView
        onTabChanged={(index) => this.onPressFooter(index)}
      >
        <RkTabView.Tab style={styles.tab} title={() => (<RkText style={styles.footext} rkType='awesome hintColor'>{FontAwesome.magnify}</RkText>)} />
        <RkTabView.Tab style={styles.tab} title={() => (<RkText style={styles.footext} rkType='awesome hintColor'>{FontAwesome.plane}</RkText>)} />
        <RkTabView.Tab style={styles.tab} title={() => (<RkText style={styles.footext} rkType='awesome hintColor'>{FontAwesome.comment}</RkText>)} />
        <RkTabView.Tab style={styles.tab} title={() => (<RkText style={styles.footext} rkType='awesome hintColor'>{FontAwesome.person}</RkText>)} />
      </RkTabView>
    </View>
  </View>
..........................................



onPressFooter(index) {
if (index == 1) {
  this.props.navigation.navigate('Dashboard');
} else if (index == 2) {
  this.props.navigation.navigate('Comments');
} else if (index == 3){
  this.props.navigation.navigate('GridV2');
}else {
  this.props.navigation.navigate('Article');
}

}

0 个答案:

没有答案