zoukankan      html  css  js  c++  java
  • 使用 react-native-tab-navigator 创建 TabBar 组件

    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>

    .

  • 相关阅读:
    红蓝对抗之Windows内网渗透
    [框架漏洞]Thinkphp系列漏洞【截至2020-07-20】
    xss
    OWASP TOP 10 详解
    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent()
    用C#实现的几种常用数据校验方法整理(CRC校验;LRC校验;BCC校验;累加和校验)
    批处理(.bat)简单应用实例
    线状地物图斑化全流程作业(使用ArcMap软件)
    VS Code Remote配置
    二分查找
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9405086.html
Copyright © 2011-2022 走看看