前言
本篇文章了解一下RN中导航组件的使用,且使用的是官方推荐的一个单独的导航库react-navigation
,来分别了解一下这个库里边的StackNavigator
,TabNavigator
和DrawerNavigator
这三个导航组件的基本使用!需要更加深入的了解的可以去官网查看其他相关的API:
React Navigation
使用
安装react-navigation库
首先呢,这个库是单独的,所以需要我们把这个库添加到我们的项目中去,在我们的项目目录执行:
yarn add@H_502_22@ react-navigation
然后等待下载安装成功即可!
StackNavigator
使用
这个导航组件主要用于不同页面之间的切换!,这个非常类似于Android中的Intent,来进行不同页面的挑战和数据的传值!
而且如果一个页面添加了StackNavigator,就在页面顶部多了一个导航栏,相当于Android中的Toolbar!
下面来看一下具体的使用:
//首先需要将StackNavigator引入@H_502_22@
import {
StackNavigator,} from 'react-navigation'@H_502_22@;
class@H_502_22@ MainScreen extends Component{
//设置navigationOptions@H_502_22@
static navigationOptions = {
title: '主页面'@H_502_22@,//标题@H_502_22@
};
render() {
//navigation属性@H_502_22@
const@H_502_22@ { navigate } = this@H_502_22@.props.navigation;
return@H_502_22@ (
<View@H_502_22@>@H_502_22@ <Text@H_502_22@ style@H_502_22@={{fontSize:20}}@H_502_22@>@H_502_22@我是MainScreen!</Text@H_502_22@>@H_502_22@ <Button@H_502_22@ title@H_502_22@="跳到SecondScreen"@H_502_22@ //点击跳转,参数为下边RouteConfigs@H_502_22@中要跳转的routeName@H_502_22@ onPress@H_502_22@={()=@H_502_22@>@H_502_22@navigate('Sencond')}/> </View@H_502_22@>@H_502_22@ ); } } class SecondScreen extends Component{ static navigationOptions ={ title: 次页面 }; render() { return ( <View@H_502_22@ >@H_502_22@ <Text@H_502_22@ style@H_502_22@={{fontSize:20}}@H_502_22@>@H_502_22@我是SecondScreen!</Text@H_502_22@>@H_502_22@ </View@H_502_22@>@H_502_22@ ); } } //设置StackNavigator(RouteConfigs,StackNavigatorConfig) const App = StackNavigator({ Main: {screen: MainScreen},Sencond: {screen: SecondScreen},}); AppRegistry.registerComponent('AwesomeProject',() => App);@H_502_22@
上边就是StackNavigator的基本用法,如果要在页面跳转的时候传递一些数据要这样写:
onPress={()@H_502_22@=>@H_502_22@navigate('Sencond'@H_502_22@,{ hello@H_502_22@: '你好!'@H_502_22@ })}
在navigate()
方法中添加第二个参数,格式为{ key: value }
的形式!然后在第二个页面中接收数据:
render() { const { params } = this.props.navigation.state; return ( <View@H_502_22@ >@H_502_22@ <Text@H_502_22@ style@H_502_22@=@H_502_22@@H_502_22@{{fontSize@H_502_22@:20}}@H_502_22@>@H_502_22@{params.hello}我是SecondScreen!</Text@H_502_22@>@H_502_22@ </View@H_502_22@>@H_502_22@ ); }@H_502_22@
要先拿到传值页面中navigation属性的state:
const { params } = this.props.navigation.state;
然后取值params.key
的形式拿到传递的值,例子中为params.hello
。
另外如果我们在第二个接收页面设置navigationOptions
的时候需要传递过来的参数,该怎么做呢?有两种方式都可以拿到:
①在接收页面中:
static navigationOptions@H_502_22@ = ({ navigation })@H_502_22@ =>@H_502_22@ ({
title@H_502_22@: `次页面 ${navigation.state.params.hello}@H_502_22@`,});
可以将navigationOptions
定义为这个页面属性的函数,比如这里在设置title属性的时候,使用${navigation.state.params.hello}
这个变量表示传递的值,需要注意的是外边需要``
包围,这个是键盘Esc下边的键!这点要注意!
②我们在设置StackNavigator的时候,可以配置RouteConfigs!
StackNavigator({
Main@H_502_22@: {screen@H_502_22@: MainScreen},Sencond@H_502_22@: {
screen@H_502_22@: SecondScreen,navigationOptions@H_502_22@: ({navigation})@H_502_22@ =>@H_502_22@ ({
title@H_502_22@: `次页面 ${navigation.state.params.hello}@H_502_22@`,}),},});
直接在配置第二个页面的RouteConfigs时,去设置navigationOptions
,相当于重写了我们在SecondScreen中设置的navigationOptions
,那么当然在跳转到第二个页面时会显示这里配置的navigationOptions
,而不是在SecondScreen中设置的!
可以试一下:
class@H_502_22@ SecondScreen@H_502_22@ extends@H_502_22@ Component@H_502_22@{@H_502_22@
static@H_502_22@ navigationOptions = {
title: '我就不信我显示不了!'@H_502_22@,};
...
}
运行一下:
是吧,你就是显示不了!哈哈哈…
配置
那么说到这里,我们在设置StackNavigator的时候都可以设置哪些东东?
StackNavigator(RouteConfigs,StackNavigatorConfig)@H_502_22@
RouteConfigs:路由设置
这里参照官网:
StackNavigator({
// For each screen that you can navigate to,create@H_502_22@ a new entry like@H_502_22@ this: //路由名字 Profile: { // `ProfileScreen`@H_502_22@ is@H_502_22@ a React component that will be the main content of@H_502_22@ the screen. //具体的页面 screen: ProfileScreen,// When@H_502_22@ `ProfileScreen`@H_502_22@ is@H_502_22@ loaded by@H_502_22@ the StackNavigator,it will be given a `navigation`@H_502_22@ prop. // Optional: When@H_502_22@ deep linking or@H_502_22@ using@H_502_22@ react-navigation in@H_502_22@ a web app,this path is@H_502_22@ used: //页面的路径 path: 'people/:name'@H_502_22@,// The action@H_502_22@ and@H_502_22@ route params are@H_502_22@ extracted from@H_502_22@ the path. // Optional: Override the `navigationOptions`@H_502_22@ for@H_502_22@ the screen //导航栏选项 navigationOptions: ({navigation}) => ({ title: `${navigation.state.params.name}'s Profile'`@H_502_22@,...MyOtherRoutes,});@H_502_22@
StackNavigatorConfig
Options for the router:
initialRouteName
- Sets the default screen of the stack. Must match one of the keys in route configs. 设置默认页面initialRouteParams
- The params for the initial route.设置默认页面的传值navigationOptions
- Default navigation options to use for screens. 设置默认的导航栏选项paths
- A mapping of overrides for the paths set in the route configs. 重新路由设置中的path
还有一些视觉效果上面的配置,比如设置页面切换模式mode
,设置过渡动画transition
等!可以参考官方文档!
navigationOptions导航栏选项
那么具体到一个页面中,navigationOptions都可以设置哪些参数?
title
设置标题(默认,在没有设置header相关属性下显示)header
设置导航栏头部,接收参数为React Element或者是一个返回React Element的给定HeaderProps
参数的方法。如果设置为null
,则整个标题栏就不显示了!
这个属性的存在,我们就可以自定义我们的Header!headerRight
显示在header右边的组件,比如Android中常见的菜单按钮等,都可以通过这一属性设置!
其他的属性参数的设置,就不再说了,可以参考官方文档:
StackNavigator
结语
本篇文章主要介绍了React Navigation导航库中StackNavigator的使用,剩余的两个导航组件,我们放在下篇博客中了解! 好了,就这样,我们下篇文章再见!