使用 react-native-tab-navigator 创建 TabBar 组件
2023-09-11 14:15:30 时间
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>
.
相关文章
- React 组件性能优化
- React组件属性部类(propTypes)校验
- 【C#】无损转换Image为Icon 【C#】组件发布:MessageTip,轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常:并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘
- 【Vue】路由组件通过router-link设置css样式及active单击样式
- 【Vue】Vue中【爷组件】与【子组件】通过【父组件】参数相互调用方法(props方式,图文+代码示例)
- react-native 自定义 下拉刷新 / 上拉加载更多 组件
- react 创建组件 (四)Stateless Functional Component
- react 创建组件 (二)component
- react 中的无状态函数式组件
- react 项目实战(十)引入AntDesign组件库
- react-native 组件之间传值
- react-native 常用组件的用法(一)
- Vue - 兄弟组件通信(eventBus)
- React性能优化,六个小技巧教你减少组件无效渲染
- android的listview组件
- 微信小程序父子组件之间传值
- React父子组件间的传值
- React 多组件传值props和this
- react组件懒加载
- 《iOS组件与框架——iOS SDK高级特性剖析》——第2章,第2.3节显示地图
- React中的render props,让组件复用(共享)变得简单,你还不赶紧掌握它?
- React组件间通信(常用方式,简单易用)
- React创建组件的三种方式
- Android应用程序组件Content Provider的共享数据更新通知机制分析
- SwiftUI ZStack组件如何自动居中(教程含源码)
- macOS SwiftUI 封装组件之 可选择可输入组合文本框NSComboBox(教程含源码)
- macOS SwiftUI 封装组件之 不确定指示器NSProgressIndicator(教程含源码)
- React非受控组件
- React 基础:在组件之间传递数据
- React函数式组件值之useRef()和useImperativeHandle()
- React函数式组件值之useEffect()