RN要想實現iOS中tabbar的效果，通用的就是用第三方的react-native-tab-navigator了，很好很強大，在此記錄使用這個進行頁面切換的效果
首先先下載 React-native-tab-navigator
npm install react-native-tab-navigator --save//我在save前面使用一個-竟然不行，也是666
然后在項目中導入
import TabNavigator from 'react-native-tab-navigator'
再然后就可以愉快的使用了
所屬關系：TabNavigator-> TabNavigator.Item-> component(頁面)
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
//導入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator'
//導入對應的四個頁面
import FirstPage from './FirstPage'
import SecondPage from './SecondPage'
import ThirdPage from './ThirdPage'
import FourPage from './FourPage'
export default class HomePage extends Component {
constructor(props) {
super(props);
//先聲明一個狀態，這個狀態為了改變tabbar的
//點擊tabbar，觸發onPress方法，在里面改變狀態，從而達到切換頁面的效果
this.state = {
selectedTab:'首頁'
//默認選擇第一個頁面（'消息'默認選擇第二個頁面）
//this.setState({selectedTab:'首頁'}) 這個用于切換頁面
//selectedTab：'' ->為不同的值，就切換對應的頁面
};
}
render() {
return (
<View style={HomePageStyle.viewStyle}>
//初始化tabbar
<TabNavigator>
//初始化tabbarItem
<TabNavigator.Item
title='首頁'
onPress={()=>{this.setState({selectedTab:'首頁'})}}
selected={this.state.selectedTab === '首頁'}
titleStyle={HomePageStyle.TBarTitleStyle}
selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
>
//加載頁面
<FirstPage/>
</TabNavigator.Item>
<TabNavigator.Item
title='消息'
onPress={()=>{this.setState({selectedTab:'消息'})}}
selected={this.state.selectedTab === '消息'}
titleStyle={HomePageStyle.TBarTitleStyle}
selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
>
<SecondPage/>
</TabNavigator.Item>
<TabNavigator.Item
title='聯系人'
onPress={()=>{this.setState({selectedTab:'聯系人'})}}
selected={this.state.selectedTab === '聯系人'}
titleStyle={HomePageStyle.TBarTitleStyle}
selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
>
<ThirdPage/>
</TabNavigator.Item>
<TabNavigator.Item
title='我的'
onPress={()=>{this.setState({selectedTab:'我的'})}}
selected={this.state.selectedTab === '我的'}
titleStyle={HomePageStyle.TBarTitleStyle}
selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
>
<FourPage/>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
var HomePageStyle = StyleSheet.create({
viewStyle:{
flex:1,
},
TBarTitleStyle:{
color:'black',
},
TBarTitleSelectStyle:{
color:'red',
},
});
AppRegistry.registerComponent('myTabBarAndNavigationTest', () => HomePage);
其他頁面簡單了寫個view,這里貼出第一個頁面的代碼，其他雷同
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
export default class FirstPage extends Component {
constructor(props){
super(props);
this.state ={
selectedTab:'home'
};
}
render() {
return (
<View style={FirstStyle.ViewStyle}>
<Text style={FirstStyle.textStyle}>
第一個頁面
</Text>
</View>
);
}
}
const FirstStyle = StyleSheet.create({
ViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
textStyle: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('myTabBarAndNavigationTest', () => FirstPage);
tabbargif.gif
