1.页面跳转方法：
reset - 切换路由相关
replace-切换路由相关
navigate-跳转到下一个路由，可以是路由中的任意一个。
push-作用和navigate基本差不多，唯一不同之处是当在同一个页面继续跳转时，navigate不会起作用，而push会重新路由到下一个。例如：当前在A页页面时，A.navigation.navigate('A')时，不会起作用。而使用push可用。
goBack-返回到上一个路由
pop-返回到上一个路由和goBack类似。
popToTop-返回到栈顶，并关闭所有的路由。
2.页面跳转时可携带参数
let params = {
"key":"value"
};
navigate('RoutName',params)
3.创建navigator路由
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
/* render function, etc */
}
class DetailsScreen extends React.Component {
static navigationOptions = {
title: 'Details',
};
/* render function, etc */
}
/* other code... */
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home', //根页面
/* The header config from HomeScreen is now here */
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
);
export default createAppContainer(RootStack);
注意:3.x版本之后需要返回一个包裹createAppContainer。
4.创建tabNavigator路由
import React from 'react';
import { Text, View,Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel:'Home',
tabBarIcon : ({focused})=>{
const image = focused?require('./Resource/message.png'):require('./Resource/message-outline.png');
return (
<Image source={image} style={{width:24,height:24}}/>
)
},
tabBarOnPress: ({ navigation, defaultHandler }) => {
defaultHandler();
console.log(' press'+navigation)
}
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
tabBarLabel:'Setting',
tabBarIcon : ({focused})=>{
const image = focused?require('./Resource/message.png'):require('./Resource/message-outline.png');
return (
<Image source={image} style={{width:24,height:24}}/>
)
},
tabBarOnPress: ({ navigation, defaultHandler }) => {
defaultHandler();
console.log(' press'+navigation)
}
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
},{
// tabBarItem整体配置
initialRouteName: 'Home', //第一个展示页面
swipeEnabled: false, //是否支持手势切换
animationEnabled: false, //支持动画
lazy: true, //懒加载
tabBarOptions:{
activeTintColor:'#1F8CEB',
inactiveTintColor:'#4b4b4b',
},
backBehavior:'none' //安卓物理返回键处理
});
export default createAppContainer(TabNavigator);
5.navigator+tabNavigator
import {
createSwitchNavigator,
createBottomTabNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import MessageList from './MessageList';
import SubApplication from './SubApplication';
import Contacts from './Contacts';
import MineCenter from './MineCenter';
import LoginPage from './LoginPage';
import SettingPage from './SettingPage';
const TabNavigator = createBottomTabNavigator({
message:{
screen:MessageList,
},
subApp:{
screen:SubApplication,
},
contacts:{
screen:Contacts,
},
mine:{
screen:MineCenter,
}
}, {
// tabBarItem整体配置
initialRouteName: 'message',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
tabBarOptions:{
activeTintColor:'#1F8CEB',
inactiveTintColor:'#4b4b4b',
},
backBehavior:'none'
}
);
const StackNavigator = createStackNavigator(
{
tabBar: {
screen: TabNavigator,
navigationOptions:{
header:null //返回null时可以隐藏导航栏bar
}
},
detail: {
screen: SettingPage,
// navigationOptions : {
// title:'设置'
// }
}
},
{
navigationOptions:({navigation}) => ({
//title:navigation.state.routeName,
headerStyle:{
backgroundColor:'#f4511e',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
})
}
);
7.登录+navigator+tabBarNavigatior
import {
createSwitchNavigator,
createBottomTabNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import MessageList from './MessageList';
import SubApplication from './SubApplication';
import Contacts from './Contacts';
import MineCenter from './MineCenter';
import LoginPage from './LoginPage';
import SettingPage from './SettingPage';
const TabNavigator = createBottomTabNavigator({
message:{
screen:MessageList,
},
subApp:{
screen:SubApplication,
},
contacts:{
screen:Contacts,
},
mine:{
screen:MineCenter,
}
}, {
// tabBarItem整体配置
initialRouteName: 'message',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
tabBarOptions:{
activeTintColor:'#1F8CEB',
inactiveTintColor:'#4b4b4b',
},
backBehavior:'none'
}
);
const StackNavigator = createStackNavigator(
{
tabBar: {
screen: TabNavigator,
navigationOptions:{
header:null
}
},
detail: {
screen: SettingPage,
// navigationOptions : {
// title:'设置'
// }
}
},
{
navigationOptions:({navigation}) => ({
//title:navigation.state.routeName,
headerStyle:{
backgroundColor:'#f4511e',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
})
}
);
export default createAppContainer(createSwitchNavigator(
{
login: LoginPage,
tabBarController: StackNavigator
},{
initialRouteName:'login'
}
));
网友评论