React Native从零单排2 react-navigation

RN版本:0.63.4
系统:Win10

前言

本系列文档是React Native学习笔记,主要记录学习过程中遇到的问题和注意点。 如果有人希望按照此文档开始学习,那么最好有一些Android和前端开发基础,因为此文档只会记录作者的学习过程中的重点难点,而不会详细列出每一个步骤。

组件的选择

移动应用基本不会只由一个页面组成。管理多个页面的呈现、跳转的组件就是我们通常所说的导航器。 React Native 中现有的使用较多的导航组件有:

  • react navigation为ReactNative官方维护插件,使用上相对较简单,使用纯js实现。
  • react native navigation为第三方维护插
    件,需要修改原生配置文件,使用APP原生modules实现。

一般来说,我们选择组件的时候,不仅要考虑组件的功能是否符合自己的需求,还要考虑组件是否被社区支持。一旦使用的组件过时或者被弃用,切换组件是一件很痛苦的事情,所以我这里推荐社区今后主推的方案: react-navigation

安装导航组件

首先执行以下命令之一开始安装

npm: npm install @react-navigation/native
yarn: yarn add @react-navigation/native

然后,还需要安装其他组件

npm: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn: yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

对于在Mac上进行ios开发的项目,还需要cd到ios文件夹下执行以下命令

pod install

如果这一步骤遇到install失败的情况,大部分是因为网络的问题,这个时候就需要翻墙并配置终端使用代理,然后重新pod install

最后,在使用导航组件之前,需要确保以下代码处在App的最顶端,一般是index.js或者App.js

import 'react-native-gesture-handler';

使用组件

使用导航组件,需要用 NavigationContainer 将整个App包住,一般这一步也在index.js或者App.js完成

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
}

Stack Navigator

在浏览器中,我们可以通过a标签来实现在页面之间跳转,浏览器会为我们提供返回功能和浏览历史。类似的,在React Navigation中Stack Navigator为我们提供了在页面之间切换并管理导航历史的方法。

这里,我一般会把StackNavigator和Android中的Activity Stack机制类比来理解,Android平台设计了Activity Stack机制用于管理Activity,其遵循先进后出的原则,系统总是显示位于栈顶的Activity。在操作应用程序时,每次启动新的Activity,都会将此压入Activity Stack,当用户执行返回操作时,移除Activity Stack顶上的Activity,这样就实现了返回上一个Activty的功能。直到用户一直返回到Home Screen,这时候可以理解为移除了Activity Stack所有的Activity。

对于StackNavigator也是这样,点击返回按钮默认总会返回上个页面。

首先,我们需要安装 @react-navigation/stack

npm: npm install @react-navigation/stack
yarn: yarn add @react-navigation/stack

通过createStackNavigator方法创建Stack对象,这个对象有两个属性:Screen和Navigator,Screen的子节点就是导航器的路由。

import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
     <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          name="Home" 
          component={HomeScreen}
          options={{title: 'Home'}} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

在这里,Screen还可以通过更多的属性进行改变,比如:

{
    title: title,
    headerStyle: {
      backgroundColor: '#1E90FF',
      // elevation设置为零可以去掉header下部的线
      // 那条线实际上就是header高于其他部分的视觉效果
      elevation: 0,
      shadowOpacity: 0,
    },
    headerBackTitle: 'Return',
    headerTintColor: 'white',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerTitleAlign: 'center',
  };

切换页面并传递参数

示例如下

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        // 如果要重复进入同一个页面,需要将navigate改为push
        // 即 navigation.push('Details'),否则不会起作用
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" 
        onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

特殊地,如果要传递参数到被嵌套的页面,比如SettingsScreen是MineScreen上的导航器内的页面,如果要传递到SettingsScreen

navigation.navigate('Mine', {
  screen: 'Settings',
  params: { user: 'jane' },
});

React Navigation 生命周期事件

React Navigation在窗口状态发生改变的时候,提供了相应的事件:'focus' 和 'blur'
可以通过如下方法监听事件,并在窗口状态发生变化的时候进行相应的处理

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First">
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="Settings"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Profile" component={ProfileScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
        <Tab.Screen name="Second">
          {() => (
            <HomeStack.Navigator>
              <HomeStack.Screen name="Home" component={HomeScreen} />
              <HomeStack.Screen name="Details" component={DetailsScreen} />
            </HomeStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

focus:

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

blur:

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

以上就是我在使用 React Navigation 过程中的总结,还有一些方法的注意事项,基本都可以在官方文档找到答案

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容