1.github上的地址:
https://github.com/lwx123/react-native-tab-navigator
2.终端运行:
npm install react-native-tab-navigator --save
3.导入,类似安卓,
import TabNavigator from 'react-native-tab-navigator';
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; import TabNavigator from 'react-native-tab-navigator'; import HomeComponent from './home/HomeComponent'; import SmartLiveComponent from './smart_live/SmartLiveComponent'; import MyComponent from './my/MyComponent'; export default class MangoClient extends Component { constructor() { super(); this.state = { selectedTab: '首页', } } render() { return ( <View style={styles.container}> <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '首页'} title="首页" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_first.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_first_over.png")} />} onPress={() => this.setState({ selectedTab: '首页' })}> <HomeComponent/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '智居'} title="智居" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_second.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_second_over.png")} />} onPress={() => this.setState({ selectedTab: '智居' })}> <SmartLiveComponent /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_four.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_four_over.png")} />} onPress={() => this.setState({ selectedTab: '我的' })}> <MyComponent /> </TabNavigator.Item> </TabNavigator> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 }, tabText: { color: "#666666", fontSize: 13 }, selectedTabText: { color: "#ff8a00", fontSize: 13 }, icon: { width: 25, height: 25 } }); AppRegistry.registerComponent('MangoClient', () => MangoClient);
可以自己定义选中与未选中text和图标的样式,
别忘了导入子页面:
import HomeComponent from './home/HomeComponent'; import SmartLiveComponent from './smart_live/SmartLiveComponent'; import MyComponent from './my/MyComponent';
注意自己子页面的路径。
效果: