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>

    .

  • 相关阅读:
    IHttpActionResult – new way of creating responses in ASP.NET Web API 2
    Web Api 中返回JSON的正确做法
    MVC中使用RazorPDF创建PDF
    Mac上javaweb开发环境搭建介绍----git安装及使用
    Web开发环境的搭建(mysql、maven)
    父pom.xml的详解
    pom.xml中的常用依赖包总结
    Maven+Spring+SpringMVC+Mybatis中的常见错误
    jqGrid中关于工具条中的输入框中内容的读取
    jqGrid的Fomatter用于将图片url地址转换成前端图片显示的使用
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9405086.html
Copyright © 2011-2022 走看看