React Native入门(九)之导航组件React Navigation(1)StackNavigator

前端之家收集整理的这篇文章主要介绍了React Native入门(九)之导航组件React Navigation(1)StackNavigator前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

本篇文章了解一下RN中导航组件的使用,且使用的是官方推荐的一个单独的导航库react-navigation,来分别了解一下这个库里边的StackNavigatorTabNavigatorDrawerNavigator这三个导航组件的基本使用!需要更加深入的了解的可以去官网查看其他相关的API:
React Navigation

使用

安装react-navigation库

首先呢,这个库是单独的,所以需要我们把这个库添加到我们的项目中去,在我们的项目目录执行:

yarn add react-navigation


然后等待下载安装成功即可!

StackNavigator

使用

这个导航组件主要用于不同页面之间的切换!,这个非常类似于Android中的Intent,来进行不同页面的挑战和数据的传值!
而且如果一个页面添加了StackNavigator,就在页面顶部多了一个导航栏,相当于Android中的Toolbar!
下面来看一下具体的使用:

//首先需要将StackNavigator引入
import {
  StackNavigator,} from 'react-navigation';

class MainScreen extends Component{
  //设置navigationOptions
  static navigationOptions = {
    title: '主页面',//标题
  };
  render() {
    //navigation属性
    const { navigate } = this.props.navigation;
    return (
      <View> <Text style={{fontSize:20}}>我是MainScreen!</Text> <Button title="跳到SecondScreen" //点击跳转,参数为下边RouteConfigs中要跳转routeName onPress={()=>navigate('Sencond')}/> </View> ); } } class SecondScreen extends Component{ static navigationOptions ={ title: 次页面 }; render() { return ( <View > <Text style={{fontSize:20}}>我是SecondScreen!</Text> </View> ); } } //设置StackNavigator(RouteConfigs,StackNavigatorConfig) const App = StackNavigator({ Main: {screen: MainScreen},Sencond: {screen: SecondScreen},}); AppRegistry.registerComponent('AwesomeProject',() => App);

上边就是StackNavigator的基本用法,如果要在页面跳转的时候传递一些数据要这样写:

onPress={()=>navigate('Sencond',{ hello: '你好!' })}

navigate()方法添加第二个参数,格式为{ key: value }的形式!然后在第二个页面中接收数据:

render() { const { params } = this.props.navigation.state; return ( <View > <Text style={{fontSize:20}}>{params.hello}我是SecondScreen!</Text> </View> ); }

要先拿到传值页面中navigation属性的state:
const { params } = this.props.navigation.state;
然后取值params.key的形式拿到传递的值,例子中为params.hello

另外如果我们在第二个接收页面设置navigationOptions的时候需要传递过来的参数,该怎么做呢?有两种方式都可以拿到:
①在接收页面中:

static navigationOptions = ({ navigation }) => ({
    title: `页面 ${navigation.state.params.hello}`,});

可以将navigationOptions定义为这个页面属性函数,比如这里在设置title属性的时候,使用${navigation.state.params.hello}这个变量表示传递的值,需要注意的是外边需要`` 包围,这个是键盘Esc下边的键!这点要注意!
②我们在设置StackNavigator的时候,可以配置RouteConfigs!

StackNavigator({
  Main: {screen: MainScreen},Sencond: {
    screen: SecondScreen,navigationOptions: ({navigation}) => ({
      title: `页面 ${navigation.state.params.hello}`,}),},});

直接在配置第二个页面的RouteConfigs时,去设置navigationOptions,相当于重写了我们在SecondScreen中设置的navigationOptions,那么当然在跳转到第二个页面时会显示这里配置的navigationOptions,而不是在SecondScreen中设置的!

可以试一下:

class SecondScreen extends Component{
  static navigationOptions = {
    title: '我就不信我显示不了!',};
  ...
}

运行一下:

是吧,你就是显示不了!哈哈哈…

配置

那么说到这里,我们在设置StackNavigator的时候都可以设置哪些东东?

StackNavigator(RouteConfigs,StackNavigatorConfig)

RouteConfigs:路由设置

这里参照官网:

StackNavigator({
  // For each screen that you can navigate to,create a new entry like this: //路由名字 Profile: { // `ProfileScreen` is a React component that will be the main content of the screen. //具体的页面 screen: ProfileScreen,// When `ProfileScreen` is loaded by the StackNavigator,it will be given a `navigation` prop. // Optional: When deep linking or using react-navigation in a web app,this path is used: //页面的路径 path: 'people/:name',// The action and route params are extracted from the path. // Optional: Override the `navigationOptions` for the screen //导航栏选项 navigationOptions: ({navigation}) => ({ title: `${navigation.state.params.name}'s Profile'`,...MyOtherRoutes,});

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都可以设置哪些参数?

  • title设置标题(默认,在没有设置header相关属性显示
  • header 设置导航栏头部,接收参数为React Element或者是一个返回React Element的给定HeaderProps参数的方法。如果设置为null,则整个标题栏就不显示了!
    这个属性的存在,我们就可以自定义我们的Header!
  • headerRight 显示在header右边的组件,比如Android中常见的菜单按钮等,都可以通过这一属性设置!

其他的属性参数的设置,就不再说了,可以参考官方文档:
StackNavigator

结语

本篇文章主要介绍了React Navigation导航库中StackNavigator的使用,剩余的两个导航组件,我们放在下篇博客中了解! 好了,就这样,我们下篇文章再见!

原文链接:https://www.f2er.com/react/303104.html

猜你在找的React相关文章