1.下载
npm install react-native-tab-navigator –save下载
2. 导入
import TabNavigator from 'react-native-tab-navigator'3. 完整代码
import React,{Component} from 'react'; import { StyleSheet,View,Image } from 'react-native'; import TabNavigator from 'react-native-tab-navigator' import PosRN from '../index.ios' import Mine from './mine' import Cart from './cart' export default class Main extends Component { constructor(props){ super(props) 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/ic_home_normal.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_home_checked.png")} />} onPress={() => this.setState({ selectedTab: '首页' })}> <PosRN/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '购物车'} title="购物车" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_normal.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_checked.png")} />} onPress={() => this.setState({ selectedTab: '购物车' })}> <Cart /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/ic_user_normal.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_user_checked.png")} />} onPress={() => this.setState({ selectedTab: '我的' })}> <Mine /> </TabNavigator.Item> </TabNavigator> </View> ); } } let styles = StyleSheet.create({ container: { flex: 1 },tabText: { color: "#000000",fontSize: 13 },selectedTabText: { color: "#999999",icon: { width: 20,height: 20 } });