第一步：
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',//在導航中顯示的標題內容
tabBarLabel:'收藏',
headerBackTitle:'lefts',
headerLeft:'leftss',
tabBarIcon:<Image source={require('./Resources/icon1.png')} style = {{width:40,height:40}}/>
};
render() {
return (
<View style= { styles.container}>
<Text>'這是首頁'</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: {
//當前選中的tab bar的文本顏色和圖標顏色
activeTintColor: '#4BC1D2',
//當前未選中的tab bar的文本顏色和圖標顏色
inactiveTintColor: '#000',
//是否顯示tab bar的圖標，默認是false
showIcon: true,
//showLabel - 是否顯示tab bar的文本，默認是true
showLabel: true,
//是否將文本轉換為大小，默認是true
upperCaseLabel: false,
//material design中的波紋顏色(僅支持Android >= 5.0)
pressColor: '#788493',
//按下tab bar時的不透明度(僅支持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 頁指示符的樣式 (tab頁下面的一條線).
indicatorStyle: {height: 1},
},
//tab bar的位置, 可選值： 'top' or 'bottom'
tabBarPosition: 'bottom',
//是否允許滑動切換tab頁
swipeEnabled: false,
//是否在切換tab頁時使用動畫
animationEnabled: false,
//是否懶加載
lazy: true,
//返回按鈕是否會導致tab切換到初始tab頁？ 如果是，則設置為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 跑起來
