《ReactNative》之底部导航TabNavigator

先看下效果吧

          

1.安装

npm install react-native-tab-navigator -save

2.使用

引入包

import TabNavigator from 'react-native-tab-navigator';

顶部是一个自定义的组件 TitleComponent，使用时引入即可。

代码简单，不作过多解释，直接看代码即可。

完整的代码

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Navigator,
  StyleSheet,
  Image,
  
} from 'react-native';
import TitleComponent from './app/comp/home_title';
import TabNavigator from 'react-native-tab-navigator';
class App extends Component{
	constructor(props){
    super(props);
    this.state = {
      selectedTab:'home'
    };
  }
	render(){
		return(
			<View style={{flex:1}}>
				<TitleComponent title="ReactNative"/>

				<TabNavigator tabBarStyle={styles.tab} >
	        <TabNavigator.Item
	           selected={this.state.selectedTab === 'home'}
	           title="首页"
	           titleStyle={styles.app_title}
	           selectedTitleStyle={styles.selectedTabText}  
	           renderIcon={() => <Image style={styles.app_img} source={require('./img/home_n.png')} />}
	           renderSelectedIcon={() => <Image style={styles.app_img} source={require('./img/home_p.png')} />}
	           //badgeText="10"
	           onPress={() => this.setState({ selectedTab: 'home'})}>
	           
	          <Page1/>
	        </TabNavigator.Item>
	        <TabNavigator.Item
	           selected={this.state.selectedTab === 'app'}
	           title="应用"
	           renderIcon={() => <Image style={styles.app_img} source={require('./img/app_n.png')} />}
	           renderSelectedIcon={() => <Image style={styles.app_img} source={require('./img/app_p.png')} />}
	            onPress={() => this.setState({ selectedTab: 'app'})}>
	          
	            <Page2/>
	           
	        </TabNavigator.Item>
	         <TabNavigator.Item
	           selected={this.state.selectedTab === 'my'}
	           title="我的"
	           renderIcon={() => <Image style={styles.app_img} source={require('./img/my_n.png')} />}
	           renderSelectedIcon={() => <Image style={styles.app_img} source={require('./img/my_p.png')} />}
	           onPress={() => this.setState({ selectedTab: 'my' })}>
	            <Page3/>
	        </TabNavigator.Item>
	      </TabNavigator>
	     </View>
		);
	}
}
class Page1 extends Component{
	render(){
		return(
			<View style={styles.center}>
				<Text style={{fontSize:20,}}>我是page1</Text>
			</View>
		);
	}
}
class Page2 extends Component{
	render(){
		return(
			<View style={styles.center}>
				<Text style={[{fontSize:20},styles.blue]}>我是page2</Text>
			</View>
		);
	}
}
class Page3 extends Component{
	render(){
		return(
			<View style={styles.center}>
				<Text style={[{fontSize:20},styles.red]}>我是page3</Text>
			</View>
		);
	}
}
const styles=StyleSheet.create({
	 tab: {
    height: 54,
    backgroundColor: '#eee',
    alignItems: 'center'
  },
  app_img:{
    width:30,
    height:30,
  },
  selectedTabText:{
  	color:'orange',
  },
  center:{
  	flex:1,
  	justifyContent:'center',
  	alignItems:'center',
  },
  red:{
  	color:'#f00',
  },
  blue:{
  	color:'#00bfff'
  }
});

AppRegistry.registerComponent('RN', () => App);

顶部自定义组件完整代码

import React,{Component} from 'react';
import {View,
  Text,
  Image,
  StyleSheet,
  ToastAndroid,
  TouchableHighlight
} from 'react-native';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var leftImg;
export default class TitleComponent extends Component{
  constructor(props){
    super(props);
  }
  componentWillMount(){
    leftImg = require('../../img/menu.png');
  }
  
  render(){
    let leftImg = require('../../img/menu.png');
    if(this.props.leftImg==='back'){
      leftImg = require('../../img/back_n.png')
    }
    return(
      <View>
        <Image style={styles.container} source={require('../../img/title_background.png')}>
          <TouchableHighlight  style={styles.leftImg}underlayColor='#f0f0f0' onPress={this.props.back}>
            <View>
              <Image style={[styles.img,{marginLeft:10,width:20,height:20,}]}source={leftImg}/>
            </View>
          </TouchableHighlight>
          <View style={styles.titleCenter}>
            <Text style={styles.text}>{this.props.title}</Text>
          </View>
          <View style={styles.rightImg}>
            
          </View>
        </Image>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container:{
    height:50,
    width:width,
    flexDirection:'row',
  },
  leftImg:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },
  img:{
    width:25,
    height:25,
  },
  rightImg:{
    flex:1,
  },
  titleCenter:{
    flex:6,
    justifyContent:'center',
    alignItems:'center',
  },
  text:{
    color:'#fff',
    fontSize:20,
  },
});