第一步：
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
Button,
Image
} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class HomePage extends Component{
static navigationOptions = {
title: 'Welcome',//在導(dǎo)航中顯示的標(biāo)題內(nèi)容
tabBarLabel:'收藏',
headerBackTitle:'lefts',
headerLeft:'leftss',
tabBarIcon:<Image source={require('./Resources/icon1.png')} style = {{width:40,height:40}}/>
};
render() {
return (
<View style= { styles.container}>
<Text>'這是首頁(yè)'</Text>
<Button title="go to two" onPress={() => this.props.navigation.navigate('Profile')} />
<Button title="go to two" onPress={() => this.props.navigation.push('Profile')} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
justifyContent: 'center'
},
});
第二部
import React, { Component } from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import { createStackNavigator, createAppContainer ,createBottomTabNavigator} from 'react-navigation'
import Home from './Home';
import ProfileScreen from './ProfileScreen'
const TabNav = createBottomTabNavigator(
{
Home: {
screen: Home,
},
Task: {
screen: ProfileScreen,
},
},
{
tabBarOptions: {
//當(dāng)前選中的tab bar的文本顏色和圖標(biāo)顏色
activeTintColor: '#4BC1D2',
//當(dāng)前未選中的tab bar的文本顏色和圖標(biāo)顏色
inactiveTintColor: '#000',
//是否顯示tab bar的圖標(biāo)，默認(rèn)是false
showIcon: true,
//showLabel - 是否顯示tab bar的文本，默認(rèn)是true
showLabel: true,
//是否將文本轉(zhuǎn)換為大小，默認(rèn)是true
upperCaseLabel: false,
//material design中的波紋顏色(僅支持Android >= 5.0)
pressColor: '#788493',
//按下tab bar時(shí)的不透明度(僅支持iOS和Android < 5.0).
pressOpacity: 0.8,
//tab bar的樣式
style: {
backgroundColor: '#fff',
paddingBottom: 1,
borderTopWidth: 0.2,
paddingTop: 1,
borderTopColor: '#ccc',
},
//tab bar的文本樣式
labelStyle: {
fontSize: 11,
margin: 1
},
tabStyle: {
height: 45
},
//tab 頁(yè)指示符的樣式 (tab頁(yè)下面的一條線).
indicatorStyle: {height: 1},
},
//tab bar的位置, 可選值： 'top' or 'bottom'
tabBarPosition: 'bottom',
//是否允許滑動(dòng)切換tab頁(yè)
swipeEnabled: false,
//是否在切換tab頁(yè)時(shí)使用動(dòng)畫
animationEnabled: false,
//是否懶加載
lazy: true,
//返回按鈕是否會(huì)導(dǎo)致tab切換到初始tab頁(yè)？ 如果是，則設(shè)置為initialRoute，否則為none。 缺省為initialRoute。
backBehavior: 'none',
initialRouteName: 'Home',
});
const navigator = createStackNavigator({
Home: { screen: TabNav }
})
const App = createAppContainer(navigator);
export default App;
第三部 在app.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image} from 'react-native';
import MyNavgator from './MyNavgator';
export default class App extends Component {
render() {
return (
<MyNavgator/>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
alignItems: 'center',
},
});
react-native run-ios 跑起來
