使用第三方库(react-native-tab-navigator)
安装方法(在项目中)
npm install react-native-tab-navigator --save
在项目中的package.json中可查看是否加载(project/package.json)
代码(文件tab.js)
import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; //cmd项目路径下执行npm install react-native-tab-navigator --save import TabNavigator from 'react-native-tab-navigator' export default class Tabnavigator extends Component { constructor(props) { super(props); this.state = { selectedTab: 'Event' } } render() { return ( <View style={styles.container}> <TabNavigator> <TabNavigator.Item //设置选中的位置 selected={this.state.selectedTab === 'Event'} //标题 title="Event" //标题样式 titleStyle={styles.tabText} //选中时标题文字样式 selectedTitleStyle={styles.selectedTabText} //图标 renderIcon={() => <Image style={styles.icon} source={require("./images/icon.png")} />} //选中时图标 SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/icon.png")} />} //点击Event onPress={() => this.setState({ selectedTab: 'Event' })}> <View style={styles.page0}> <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Event Page</Text> </View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'Log'} title="Log" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("./res/images/home.png")} />} //选中时图标 SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/home.png")} />} onPress={() => this.setState({ selectedTab: 'Log' })}> <View style={styles.page0}> <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Log Page</Text> </View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'Device'} title="Device" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("./images/yijian.png")} />} //选中时图标 SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/yijian.png")} />} onPress={() => this.setState({ selectedTab: 'Device' })}> <View style={styles.page1}> <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is Device Page</Text> </View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'User'} title="User" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("./images/configuration.png")} />} //选中时图标 SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/configuration.png")} />} onPress={() => this.setState({ selectedTab: 'User' })}> <View style={styles.page1}> <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is User Page</Text> </View> </TabNavigator.Item> </TabNavigator> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 }, tabText: { fontSize: 10, color: 'black' }, selectedTabText: { fontSize: 10, color: 'red' }, icon: { width: 22, height: 22 }, page0: { flex: 1, backgroundColor: 'yellow' }, page1: { flex: 1, backgroundColor: 'blue' } });
在index.js文件中注册
import { AppRegistry } from 'react-native'; import Tabnavigator from './tab' AppRegistry.registerComponent('wang', ()
项目中所引用的图标下载地址阿里图标库http://www.iconfont.cn
在项目下即tab.js文件同目录创建images文件夹,将png图片放入(project/images/***.png)