说明：从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中，而且官方推荐使用React Navigation导航组件，这个已经默认为官方推荐了。
1.StackNavigator导航
这就是一般的导航器，默认情况下，StackNavigator配置为具有熟悉的iOS和Android外观：iOS上的新屏幕从右侧滑出，从Android的底部渐隐，在iOS上，StackNavigator也可以配置为模式样式，屏幕从底部滑入。写这篇文章的时候，我还没有找到在安卓设备上改变进出动画的配置。
使用介绍：
在入口文件处定义：这里简化了文件间的依赖关系。
import {StackNavigator} from 'react-navigation';
import Home from './test/Home';
import Page from './test/Page';
const gewdDemo01 = StackNavigator({
Home: {screen: Home},
Page: {screen: Page}
},{
initialRouteName: 'Home', // 默认显示界面
}
);
AppRegistry.registerComponent('gewdDemo01', () => gewdDemo01);
这样的话，是默认加上官方的导航栏效果的，如果想去掉的话，可以设置为：
const gewdDemo01 = StackNavigator({
Home: {screen: Home},
Page: {screen: Page}
},{
initialRouteName: 'Home', // 默认显示界面
headerMode: 'none'
}
);
导航整体配置列表：
- initialRouteName：设置堆栈的默认页面
- initialRouteParams：初始路由的参数
- navigationOptions： 屏幕导航的默认选项
- paths：route config里面路径设置的映射
- mode：定义渲染和转换的样式
1.card：使用标准的iOS和Android屏幕转换。这是默认值。
2.modal：使屏幕从底部滑入，这是一种常见的iOS模式。
只适用于iOS，对Android无影响 - headerMode：指定标题应如何呈现
1.float：渲染一个保持在顶部的标题，并在屏幕更改时显示动画。
这是iOS上的常见模式
2.screen：每个屏幕都有一个标题，标题与屏幕一起淡入淡出。
这是Android上的常见模式
3.none：不会显示标题 - cardStyle：使用此支路覆盖或扩展堆叠中单个卡的默认样式
- transitionConfig：返回覆盖默认屏幕转换的对象的函数
- onTransitionStart：当路由转换动画即将开始时被调用的功能
- onTransitionEnd：一旦转换动画完成，将被调用的功能
查看Home文件：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class Home extends Component {
static navigationOptions = {
title: 'Home',
}
constructor(props){
super(props);
}
gotoPage(){
const {navigate} = this.props.navigation;
navigate('Page',{
user:'Page'
});
}
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#888888'}}>
<Text>Home</Text>
<View style={{width:100,height:40,backgroundColor:'red',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'#fff'}} onPress={()=>{this.gotoPage()}}>点击跳转</Text>
</View>
</View>
);
}
}
分析gotoPage方法，navigate('组件名称')，意思是跳转到相应的页面，这是在上面的入口文件中定义好的，我们只需要传递即可，并且要加引号。后面的{}里的内容是传递的参数，在Page页面中我们可以通过如下代码拿到他们：
componentDidMount() {
// 传参
const {params} = this.props.navigation.state;
console.log(params.user);
}
查看Page页面：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button
} from 'react-native';
export default class Page extends Component {
static navigationOptions = ({navigation}) => {
return {
title:`Hello ${navigation.state.params.user}`,
headerStyle:{
backgroundColor:'pink' // 导航条样式
},
headerTintColor:'blue' // 标题文字颜色
}
}
constructor(props){
super(props);
}
gobackToHome(){
// 返回
this.props.navigation.goBack()
}
componentDidMount() {
// 传参
const {params} = this.props.navigation.state;
console.log(params.id);
}
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#888888'}}>
<Text>Page</Text>
<View style={{width:100,height:40,backgroundColor:'green',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'#fff'}} onPress={()=>{this.gobackToHome()}}>返回</Text>
</View>
</View>
);
}
}
默认的返回是在导航条上的箭头按钮，并且返回键退出也已经封装好了。
navigationOptions是对导航部分的配置项，注意写法，这种写法是比较实用的，因为可以拿到父组件传过来的参数作为标题的一部分显示，而且不影响配置项的设置。
配置项有很多，详细请看如下列表：
- title: 标题显示
- header：可以返回一个组件进行显示,当然也可以不让这个组件展示标题，还是很灵活的
- headerTitle：组件标题
- headerBackTitle：iOS上的后退按钮使用的标题字符串
- headerTruncatedBackTitle：当headerBackTitle不适合屏幕时，返回按钮使用的标题字符串。
默认情况下为“返回” - headerRight：标题的右侧的显示元素
- headerLeft：标题的左侧的显示元素
- headerStyle：标题栏的样式
- headerTitleStyle：标题栏title的样式
- headerBackTitleStyle：返回元素的样式
- headerTintColor：标题颜色
- headerPressColorAndroid：颜色纹理（Android> = 5.0）
- gesturesEnabled：是否可以使用手势关闭此屏幕。
在iOS上默认为true，Android上为false
演示效果如图：
router.gif
网友评论