第一步：
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 跑起来
