从navigator到react-navigation实战教程
随着react-navigation逐渐稳定,Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件,Navigator 自然胜任不了,这时React Native社区便孕育出了一个开源导航组件react-navigation。 react-navigation的出现替代了Navigator、 Ex-Navigation等老一代的导航组件,react-navigation可以说是Navigator的加强版,不仅有Navigator的全部功能,另外还支持底部导航类似于与iOS中的UITabBarController,此外它也支持侧拉效果方式的导航类似于Android中的抽屉效果。
什么是导航器?导航器也可以看成一个是普通的React组件,你可以通过导航器来定义你的App的导航结构。 导航器还可以渲染通用元素,例如可以配置的标题栏和选项卡栏。 在react-navigation中有以下三种类型的导航器:
{:height=”90%” width=”90%”}
在开始学习三种导航器之前,我们需要先了解两个和导航关于概念:
导航器所支持的Propsconst SomeNav = StackNavigator/TabNavigator/DrawerNavigator({
// config
});
<SomeNav
screenProps={xxx}
ref={nav => { navigation = nav; }}
onNavigationStateChange=(prevState,newState,action)=>{
}
/>
@全新导航器react-navigation精讲
Screen Navigation Prop(屏幕的navigation Prop)当导航器中的屏幕被打开时,它会收到一个 navigation包含一下功能:
const {navigation,theme,selectedTab}=this.props;
const resetAction = NavigationActions.reset({
index: 0,actions: [
NavigationActions.navigate({
routeName: 'HomePage',params:{
theme:theme,selectedTab:selectedTab
},})
]
})
navigation.dispatch(resetAction)
@全新导航器react-navigation精讲 使用navigate进行界面之间的跳转
export const AppStackNavigator = StackNavigator({
HomeScreen: {
screen: HomeScreen
},Page1: {
screen: Page1
})
class HomeScreen extends React.Component {
render() {
const {navigate} = this.props.navigation;
return (
<View>
<Text>This is HomeScreen</Text>
<Button
onPress={() => navigate('Page1',{name: 'Devio'})}
title="Go to Page1"
/>
</View>
)
}
}
@全新导航器react-navigation精讲 使用state的params可以通过this.props.state.params来获取通过 <Button
title={params.mode === 'edit' ? '保存' : '编辑'}
onPress={() =>
setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
/>
<Button
title="Go To Page1"
onPress={() => {
navigation.navigate('Page1',{ name: 'Devio' });
}}
/>
const {navigation} = this.props;
const {state,setParams} = navigation;
const {params} = state;
const showText = params.mode === 'edit' ? '正在编辑' : '编辑完成';
@全新导航器react-navigation精讲 使用setParams 改变route params
class ProfileScreen extends React.Component {
render() {
const {setParams} = this.props.navigation;
return (
<Button
onPress={() => setParams({name: 'Lucy'})}
title="Set title name to 'Lucy'"
/>
)
}
}
@全新导航器react-navigation精讲
使用goBack返回到上一页面或指定页面
export default class Page1 extends React.Component {
render() {
const {navigation} = this.props;
return <View style={{flex: 1,backgroundColor: "gray",}}>
<Text style={styles.text}>欢迎来到Page1</Text>
<Button
title="Go Back"
onPress={() => {
navigation.goBack();
}}
/>
</View>
}
}
@全新导航器react-navigation精讲 通过dispatch发送一个action
const resetAction = NavigationActions.reset({
index: 0,})
]
})
navigation.dispatch(resetAction)
@全新导航器react-navigation精讲 NavigationActions
Navigate:Navigatie action会使用Navigate action的结果来更新当前的state。
import { NavigationActions } from 'react-navigation'
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',params: {},action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)
@全新导航器react-navigation精讲 Reset:Reset action删掉所有的navigation state并且使用这个actions的结果来代替。
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 0,actions: [
NavigationActions.navigate({ routeName: 'Profile'})
]
})
this.props.navigation.dispatch(resetAction)
@全新导航器react-navigation精讲
index参数被用来定制化当前激活的route。举个例子:使用两个routes WelcomePage和HomePage给一个基础的stack navigation设置。为了重置route到HomePage,但是在堆栈中又存放在WelcomePage之上,你可以这么做: import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 1,actions: [
NavigationActions.navigate({ routeName: 'WelcomePage'}),NavigationActions.navigate({ routeName: 'HomePage'})
]
});
this.props.navigation.dispatch(resetAction);
@全新导航器react-navigation精讲 Back返回到前一个screen并且关闭当前screen.backaction creator接受一个可选的参数:
import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction);
SetParams通过SetParams我们可以修改指定页面的Params。
import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: { title: 'HomePage' },key: 'id-1517035332238-4',});
我从两方面来回答一下这个问题:
还有那些应用场景?在导航器屏幕之外使用导航功能(巧用导航器的ref)有一种场景:有的时候我们需要在导航器中所定义的屏幕之外使用导航器来做页面跳转。
下面就给大家讲解通过 示例看代码:import { NavigationActions } from 'react-navigation';
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this. navigation && this. navigation.dispatch(
NavigationActions.navigate({ routeName: someRouteName })
);
}
render() {
return (
<AppNavigator ref={nav => { navigation = nav; }} />
);
}
}
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |