阅读 175

react-navigation 4.x基础教程(一)

一、创建一个React Native项目

在命令行终端执行以下命令,创建一个新的React Native工程:

npx react-native init react_navigation_demo
复制代码

二、安装及配置react-navigation相关依赖

1、安装react-navigation核心包

在已创建好的React Native中通过以下命令安装react-navigation核心包依赖:

npm install react-navigation --save
复制代码

2、安装react-navigation扩展包

在安装完react-navigation核心包之后,还需要安装相关的扩展包,通过以下命令进行安装:

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view --save
复制代码

3、配置react-native-gesture-handler

扩展包安装完成之后需要针对react-native-gesture-handler扩展包进行相应的配置,以保证在Android设备上可以正常运行。打开项目中的react_navigation_demo/android/app/src/main/java/com/react_navigation_demo/MainActivity.java文件。在文件头部添加以下代码:

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
复制代码

在该文件的getMainComponentName方法之后添加以下代码:

@Override
    protected ReactActivityDelegate createReactActivityDelegate() {
      return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
          return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
      };
    }
复制代码

添加代码之后,文件内容如图所示:

image.png

4、引入react-native-gesture-handler

在当前React Native项目的入口文件,例如:index.js或者app.js文件的头部通过以下方式引入react-native-gesture-handler

import 'react-native-gesture-handler';
复制代码

三、创建react-navigation配置文件及页面

1、创建react-navigation配置文件

在项目的根目录下创建react-navigation配置文件,名称为navigation.js。创建完成之后的目录结构如下:

image.png

2、创建页面

在根目录下创建pages文件夹,用于保存页面。在pages目录中创建Home文件夹作为主页的保存目录,创建About文件夹作为关于页面的保存目录。创建完成之后项目目录如图所示:

image.png

pages/Home/index.js中添加以下代码,可以直接复制粘贴:

import React, {Component} from 'react';
import {View, Text} from 'react-native';

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        Home页面
      </Text>
    </View>
  }
}
复制代码

pages/About/index.js中添加以下代码,可以直接复制粘贴:

import React, {Component} from 'react';
import {View, Text} from 'react-native';

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        About页面
      </Text>
    </View>
  }
}
复制代码

navigation.js文件中进行导航配置,添加以下代码,可以直接复制粘贴:

import React from 'react';
import HomePage from './pages/Home';
import AboutPage from './pages/About';
import { createStackNavigator } from 'react-navigation-stack';

const AppNavigator = createStackNavigator({
  // 导航名称
  Home: {
    screen: HomePage, // 导航指向的页面
    navigationOptions: {
      title: "主页", // 设置页面title
    }
  },
  // 导航名称
  About: {
    screen: AboutPage, // 导航指向的页面
    navigationOptions: {
      title: "关于", // 设置页面title
    }
  }
}, {
  initialRouteName: 'Home', // 设置默认的导航页面,应用一打开首先进入Home页面
});

export default AppNavigator;
复制代码

修改app.js文件,引入创建的导航配置文件,最终修改app.js文件如下,可以直接复制粘贴:

import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import AppNavigator from './navigation';
import 'react-native-gesture-handler';

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
复制代码

四、通过导航切换页面

1、页面跳转逻辑

在页面中从react-native中引入Button组件,通过onPress()方法,在点击按钮的时候使用this.props.navigation.navigate()方法实现页面跳转切换。navigate()方法接收的是之前在navigation.js中配置的页面导航的名称。

pages/Home/index.js中添加完导航跳转逻辑之后的代码如下,可以直接复制粘贴覆盖原来的代码:

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        Home页面
      </Text>
      <Button title={"跳转到About页面"} onPress={() => this.props.navigation.navigate('About')}/>
    </View>
  }
}
复制代码

pages/About/index.js中添加完导航跳转逻辑之后的代码如下,可以直接复制粘贴覆盖原来的代码:

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        About页面
      </Text>
      <Button title={"跳转到Home页面"} onPress={() => this.props.navigation.navigate('Home')}/>
    </View>
  }
}
复制代码

在终端输入npm run android启动项目,运行界面如图所示:

image.png

点击按钮可以跳转到关于页面:

202107111446.gif

文章分类
前端