使用 react-native-tab-navigator 创建 TabBar 组件

最新推荐文章于 2021-06-18 09:27:42 发布

转载最新推荐文章于 2021-06-18 09:27:42 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/crazycode2/p/9405086.html

本文介绍了如何在React Native项目中使用react-native-tab-navigator组件实现底部导航栏。包括安装依赖库、导入组件及具体使用方法，展示了如何通过设置属性实现不同状态下的样式变化。

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

1、首先安装好ReactNative的运行环境，安装组件依赖库

使用npm install react-native-tab-navigator --save安装所依赖的第三方库

2、导入

import TabNavigator from 'react-native-tab-navigator';

3、使用

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="业务服务"
    selectedTitleStyle={{color:"#007aff"}}//设置tab标题颜色
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/fw1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/fw2.png')} />}//设置图标选中颜色
    // badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    <View style={styles.pages1}>
      <Text>这是首页</Text>
    </View>
  </TabNavigator.Item>

  <TabNavigator.Item
    selected={this.state.selectedTab === 'shebei'}
    title="设备列表"
    selectedTitleStyle={{color:"#007aff"}}
    badgeText="1"
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/lb1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/lb2.png')} />}
    // renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'shebei' })}>
    <View style={styles.pages2}>
      <Text>设备列表</Text>
    </View>
  </TabNavigator.Item>

  <TabNavigator.Item
    selected={this.state.selectedTab === 'hetong'}
    title="合同管理"
    selectedTitleStyle={{color:"#007aff"}}
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/ht1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/ht2.png')} />}
    // renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'hetong' })}>
    <View style={styles.pages3}>
      <Text>合同管理</Text>
    </View>
  </TabNavigator.Item>

  <TabNavigator.Item
    selected={this.state.selectedTab === 'qiye'}
    title="企业信息"
    selectedTitleStyle={{color:"#007aff"}}
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/qy1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/qy2.png')} />}
    // renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'qiye' })}>
    <View style={styles.pages4}>
      <Text>个人中心</Text>
    </View>
  </TabNavigator.Item>
</TabNavigator>

转载于:https://www.cnblogs.com/crazycode2/p/9405086.html