reactnative入门tabbar(1)

最新推荐文章于 2024-04-29 00:40:04 发布

u011290064

最新推荐文章于 2024-04-29 00:40:04 发布

阅读量208

点赞数

本文链接：https://blog.youkuaiyun.com/u011290064/article/details/89816820

版权

本文介绍了React Native中TabNavigator组件的使用。首先说明了安装插件的命令，接着展示了头文件引入和核心代码，包含多个TabNavigator.Item的设置，如标题、图标、选中状态等，还指出TabNavigator下item代表底层按钮，renderIcon和renderSelectedIcon可添加选中和未选中图标。

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

安装插件

npm install react-native-tab-navigator

头文件引入

核心代码

<View style={styles.container}>
<View style={styles.header}><Text style={{fontSize:25}}>TabNavigator组件</Text></View>
<TabNavigator>
<TabNavigator.Item title='首页'
badgeText="new"
selected={this.state.selectedTab==='home'}
renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/home"}} />}
renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/home_active"}} />}
onPress={()=>{this.setState({selectedTab:'home'})}}
>
<Text2 navigation={this.props.navigation}/>
</TabNavigator.Item>
<TabNavigator.Item title='分类'
selected={this.state.selectedTab==='category'}
renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/category"}} />}
renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/category_active"}} />}
onPress={()=>{this.setState({selectedTab:'category'})}}
>
<View style={[styles.pageView,{backgroundColor:'#ff8454'}]}>
<Text style={{fontSize:50}}>分类详情</Text>
</View>
</TabNavigator.Item>
<TabNavigator.Item title='发现'
selected={this.state.selectedTab==='find'}
renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/find"}} />}
renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/find_active"}} />}
onPress={()=>{this.setState({selectedTab:'find'})}}
>
<View style={[styles.pageView,{backgroundColor:'#9aff5a'}]}>
<Text style={{fontSize:50}}>发现更多</Text>
</View>
</TabNavigator.Item>
<TabNavigator.Item title='我的'
badgeText="6"
selected={this.state.selectedTab==='mine'}
renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/mine"}} />}
onPress={()=>{this.setState({selectedTab:'mine'})}}
>
<View style={[styles.pageView,{backgroundColor:'#648eff'}]}>
<Text style={{fontSize:50}}>我的空间</Text>
</View>
</TabNavigator.Item>
</TabNavigator>
</View>