💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
#### 1.react-native-tab-navigator 安装: ~~~ npm install react-native-tab-navigator --save ~~~ 实现的效果 ![](https://box.kancloud.cn/9dadf5a86177b27f06e86d38ac3ee014_558x589.png) * * * * * 封装后的代码: ~~~ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, Navigator } from 'react-native'; // 引入外部tab-navigator库 import TabNavigator from 'react-native-tab-navigator'; import Home from '../home/home'; import Shop from '../shop/shop'; import Mine from '../mine/mine'; import More from '../more/more'; class main extends Component { constructor(props){ super(props); this.state={ selectedTab:'home'//第一次选中的tab }; } render() { return ( //tab导航 <TabNavigator> {this.tabInit('home','首页','icon_tabbar_homepage','icon_tabbar_homepage_selected','首页',Home)} {this.tabInit('shop','商家','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','商家',Shop)} {this.tabInit('mine','我的','icon_tabbar_mine','icon_tabbar_mine_selected','我的',Mine)} {this.tabInit('more','更多','icon_tabbar_misc','icon_tabbar_misc_selected','更多',More)} </TabNavigator> ); } //封装导航 //选中的tab名,标题,默认图标名字,选中图标名字,组件名字,组件 tabInit(selectedTab,title,iconName,selecteIconName,componentName,component) { return( <TabNavigator.Item selected={this.state.selectedTab === selectedTab} //标题 title={title} //选中的文字状态 selectedTitleStyle={styles.tabTextSelect} //默认图标 renderIcon={() => <Image style={styles.tabImg} source={{uri:iconName}} />} //选中的图标 renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:selecteIconName}} />} //点击 onPress={() => this.setState({ selectedTab: selectedTab })}> <Navigator initialRoute={{ name: componentName, component: component }} configureScene={(route) => { return Navigator.SceneConfigs.PushFromRight; }} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }} /> </TabNavigator.Item> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, tabImg:{ width:25, height:25 }, tabTextSelect:{ color:'#ef5100' } }); module.exports=main; ~~~ * * * * * 封装前的代码: ~~~ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; // 引入外部tab-navigator库 import TabNavigator from 'react-native-tab-navigator'; import Home from '../home/home'; import Shop from '../shop/shop'; import Mine from '../mine/mine'; import More from '../more/more'; class main extends Component { constructor(props){ super(props); this.state={ selectedTab:'home' }; } render() { return ( //tab导航 <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === 'home'} //标题 title="首页" //选中的文字状态 selectedTitleStyle={styles.tabTextSelect} //默认图标 renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_homepage'}} />} //选中的图标 renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_homepage_selected'}} />} //点击 onPress={() => this.setState({ selectedTab: 'home' })}> <Home /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'shop'} title="商店" selectedTitleStyle={styles.tabTextSelect} renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_merchant_normal'}} />} renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_merchant_selected'}} />} onPress={() => this.setState({ selectedTab: 'shop' })}> <Shop /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'mine'} title="我的" selectedTitleStyle={styles.tabTextSelect} renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_mine'}} />} renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_mine_selected'}} />} onPress={() => this.setState({ selectedTab: 'mine' })}> <Mine /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'more'} title="更多" selectedTitleStyle={styles.tabTextSelect} renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_misc'}} />} renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_misc_selected'}} />} onPress={() => this.setState({ selectedTab: 'more' })}> <More /> </TabNavigator.Item> </TabNavigator> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, tabImg:{ width:25, height:25 }, tabTextSelect:{ color:'#ef5100' } }); module.exports=main; ~~~