react-navigation开发指南
推荐使用
creatMaterialTopTabNavigator顶部材料设计主题标签栏
和
createBottomTabNavigator相当于iOS的TabBarController,屏幕下方标签栏。
navigation包含的功能属性：
navigate: 跳转到其他界面
state：屏幕当前state
setParamas: 改变路由的params
goBack：关闭当前屏幕
dispatch:向路由发送一个action
addListener： 订阅导航生命周期的更新
isFocused:true 标识屏幕获取了焦点
getParams: 获取具有回退的特定参数
dangerouslyGetParent: 返回父导航器；
注意：一个navigation有可能没有navigate、setParams以及goBack,只有state与dispatch,所以在使用navigate时要进行判断，如果没有navigate可以使用navigation去dispatch一个新的action。
如：
const { navigation,theme,selectedTab}=this.props;
const resetAction = StackActions.reset({
index: 0,
actions:[
NavigationActions.navigate({
routeName: 'HomePage',
params:{
theme:theme,
selectedTab: selectedTab
},
})
]
})
navigation.dispatch(resetAction)
注意：reset这个API在2.0以后的版本中被从NavigationActions中移到了StackActions中，如以上代码，使用是要注意
StackNavigator的额外功能：
当且仅当当前navigator是stack navigator时，this.props.navigation上有一些附加功能，这些函数是navigate和goBack的代替方法，你可以使用任何你喜欢的方法，功能如下：
this.props.navigation
push 导航到堆栈中的一个新路由
pop 返回堆栈中的上一个页面
popToTop 跳转到堆栈中的最顶层页面
replace 用新路由替换当前路由
reset 擦除导航器状态并将其替换多个操作的结果
dismiss 关闭当前栈
使用navigate进行页面间的跳转
navigation.navigate({routeName, params, action, key})
或
navigation.navagate(routeName, params, action)
//routeName: 要跳转页面的路由名，也就是我们在导航配置里面配置的路由名
//params: 传递给下一个界面的参数；
//action: 如果改界面是一个navigation的话，将运行这个sub-action
//key: 要导航到路由的可选标识符。如果已经存在，将后退到此路由
可以通过this.props.state.params来获取通过setParams(),或navigation.navigate()传递的参数
<Button
title={params.mode === 'edit' ? '保存':'编辑'}
onPress={()=>
setParams({mode: params.mode === 'edit' ? '' :'edit'})}
/>
<Button
title="Go to Page1"
onPress={()=>{
navigation.navigate('page',{name:'Devio'});
}}
/>
const {navigation} = this.prop;
const {state, setParams} = navigation;
const {params} = state;
const showText = params.mode === 'edit' ? '正在编辑':'完成编辑';
使用setParams改变route params
setParams: function setParams(params): 我们可以借助setParams来改变route params ，例如通过setParams来更新顶部标题，返回按钮等；
class ProfileScreen extends React.Component {
render(){
const {setParams} = this.props.navigation;
return (
<Button
onPress={() => setParams({name: 'Lucy'})}
title="Set title name to 'Lucy'"
/>
)
}
}
注意：navigation.setParams改变的是当前页面的Params,如果要改变其他页面的params可以通过NavigationActions.setParams完成，下文会讲到。
使用goBack返回上一页或者指定页面
goBack: function goBack(key): 我们可以借助goBack返回到上一页或者路由栈指定页面。
- 其中
key表示你要返回页面的页面标识如id-151704349482934754-4,不是routeName。 - 可以通过指定页面的
navigation.state.key来获得页面的标识 - key 非必传，也可以穿null
navigation..state {params: {...}, key: "id-154839473957543975-4", routeName: "Page1"}
<Button
title="Set title name to 'Lucy'"
onPress={() => {
navigation.goBack();
}}
/>
通过dispatch发送一个action
-
dispatch: function dispatch(action): 给当前页面设置action，会替换原来的跳转，回退等事件。
const resetAction = StackActions.reset({
index: 0,
actions:[
NavigationActions.navigate({
routeName: 'HomePage',
params:{
theme:theme,
selectedTab: selectedTab
},
})
]
})
navigation.dispatch(resetAction)
NavigationActions
- Navigate: 导航到其他页面
- Back : 返回到上一个页面
- Set params : 设置指定页面的Params;
- Init : 初始化一个state 如果state是undefined
Navigate
方法原型： navigate({routeName, params,actions,key})
- routeName: 字符串， 必选 ，在app的router里注册的导航目的地的routeName
- params: 对象， 可选项，融合进目的地route的参数
- action： 对象， 可选项（高级），如果screen也是一个navigator，次级action可以在router中运行。在文档中描述的任何actions都可以作为次级action。
- key: string或null, 可选，要导航到的路由标识符，如果已经存在，则导航回此路由。
import {NavigationActions} from 'react-navigation';
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({routeName: 'SubProfileRoute'})
})
Back
返回到前一个screen并且关闭当前screen.backaction creator接受一个可选的参数：
方法原型： back(key)
import {NavigationActions} from 'react-navigation';
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction)
SetParams
通过SetParams我们可以修改指定页面的Params
- params: 对象， 必选参数，将会被合并到已经存在页面的Params中
- key : 字符串 ， 页面key值
import {NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: {title: 'HomePage'},
key: 'id-1547347857384537-4',
})
navigation中有setParams，为什么还要有navigationActions.setParams呢？
- 1.上文讲到过有时navigation中只有state与dispatch,这个时候如果要修改页面的Params,则只能通过
NavigationActions.setParams了。 - 2.另外，navigation.setParams只能修改当前页面的Params, 而
NavigationActions.setParams可以修改所有页面的Params；
StackActions
- Reset: 重置当前state到一个新的state；
- Replace: 使用另一条路由替换指定路由；
- Push： 在堆栈顶部添加一个页面，然后跳转到该页面
- Pop: 跳转到上一个页面；
- PopToTop: 跳转到堆栈最顶层页面；
Reset:
Reset action 删掉所有的navigation state 并且使用这个action的结果来代替。
- index, 数组，必选，navigation state中route数组中激活的route的index。
- actions, 数组，必选，Navigation Actions数组，将会代替navigation state。
- key: string or null ,可选如果设置具有导航key的导航器将重置。如果为null,根导航器将重置。
import {NavigationActions, StateActions } from 'react-navigation'
const resetAction = StateActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'Profile'})
]
})
this.props.navigation.dispatch(resetAction)
//应用场景，进入APP后欢迎页不再使用，这时可以用NavigationActions.reset重置它。
Replace:
Replace 用另一个路由替换指定路由
- key string ,被替换路由的key,如果未指定，最近的路由将会替换
- newKey string,用于替换路线的key，如果未提供则自动生成
- routeName string,routeName用于替换路由
- params object,要传入替换路由的参数
- action object,可选的子动作
*immediate boolean，目前没有效果，这是stack navigator支持动画替换（它目前不支持）
Push
Push 在堆栈顶部添加一条路由，并导航至该路由。
push与navigate的区别在于，如果有已经加载的页面， navigate方法将跳转到已经加载的页面，而不会重新创建一个新的。push总是可以创建新的页面，所以一个页面可以多次创建。
- routeName string，routeName用于替换路由。
- params object, 将合并到目标路由的参数。
- action object,可选，（高级）如果页面时navigator，则在子路由器中运行子操作。
import { StackActions } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Profile',
params:{
myUserId: 9,
},
})
this.props.navigation.dispatch(pushAction);
pop
The pop 一个可以返回堆栈中上一个路由的方法，通过设置参数n,可以指定返回多少层。
- n number, 返回的层数，1是上一层 ，2是上一层的上一层
import { StackActions } from 'react-navigation';
const popAction = StackActions.pop({
n: 1,
})
this.props.navigation.dispatch(popAction);
popToTop
The popToPop一个可以直接跳到堆栈最顶端，并销毁其他所有页面的方法，它在功能上与StackAction.pop({n: currentIndex})相同。
import { StateAction } from 'react-navigation';
this.props.navigation.dispatch(StateAction.popToTop());
