React Native從零單排2 react-navigation

RN版本：0.63.4
系統(tǒng)：Win10

前言

本系列文檔是React Native學(xué)習(xí)筆記，主要記錄學(xué)習(xí)過(guò)程中遇到的問(wèn)題和注意點(diǎn)。 如果有人希望按照此文檔開(kāi)始學(xué)習(xí)，那么最好有一些Android和前端開(kāi)發(fā)基礎(chǔ)，因?yàn)榇宋臋n只會(huì)記錄作者的學(xué)習(xí)過(guò)程中的重點(diǎn)難點(diǎn),而不會(huì)詳細(xì)列出每一個(gè)步驟。

組件的選擇

移動(dòng)應(yīng)用基本不會(huì)只由一個(gè)頁(yè)面組成。管理多個(gè)頁(yè)面的呈現(xiàn)、跳轉(zhuǎn)的組件就是我們通常所說(shuō)的導(dǎo)航器。 React Native 中現(xiàn)有的使用較多的導(dǎo)航組件有:

  • react navigation為ReactNative官方維護(hù)插件，使用上相對(duì)較簡(jiǎn)單，使用純js實(shí)現(xiàn)。
  • react native navigation為第三方維護(hù)插
    件，需要修改原生配置文件，使用APP原生modules實(shí)現(xiàn)。

一般來(lái)說(shuō)，我們選擇組件的時(shí)候，不僅要考慮組件的功能是否符合自己的需求，還要考慮組件是否被社區(qū)支持。一旦使用的組件過(guò)時(shí)或者被棄用，切換組件是一件很痛苦的事情，所以我這里推薦社區(qū)今后主推的方案: react-navigation

安裝導(dǎo)航組件

首先執(zhí)行以下命令之一開(kāi)始安裝

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

對(duì)于在Mac上進(jìn)行ios開(kāi)發(fā)的項(xiàng)目，還需要cd到ios文件夾下執(zhí)行以下命令

pod install

如果這一步驟遇到install失敗的情況，大部分是因?yàn)榫W(wǎng)絡(luò)的問(wèn)題，這個(gè)時(shí)候就需要翻墻并配置終端使用代理,然后重新pod install

最后，在使用導(dǎo)航組件之前，需要確保以下代碼處在App的最頂端，一般是index.js或者App.js

import 'react-native-gesture-handler';

使用組件

使用導(dǎo)航組件，需要用 NavigationContainer 將整個(gè)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

在瀏覽器中，我們可以通過(guò)a標(biāo)簽來(lái)實(shí)現(xiàn)在頁(yè)面之間跳轉(zhuǎn)，瀏覽器會(huì)為我們提供返回功能和瀏覽歷史。類似的，在React Navigation中Stack Navigator為我們提供了在頁(yè)面之間切換并管理導(dǎo)航歷史的方法。

這里，我一般會(huì)把StackNavigator和Android中的Activity Stack機(jī)制類比來(lái)理解，Android平臺(tái)設(shè)計(jì)了Activity Stack機(jī)制用于管理Activity，其遵循先進(jìn)后出的原則，系統(tǒng)總是顯示位于棧頂?shù)腁ctivity。在操作應(yīng)用程序時(shí)，每次啟動(dòng)新的Activity，都會(huì)將此壓入Activity Stack，當(dāng)用戶執(zhí)行返回操作時(shí)，移除Activity Stack頂上的Activity，這樣就實(shí)現(xiàn)了返回上一個(gè)Activty的功能。直到用戶一直返回到Home Screen，這時(shí)候可以理解為移除了Activity Stack所有的Activity。

對(duì)于StackNavigator也是這樣，點(diǎn)擊返回按鈕默認(rèn)總會(huì)返回上個(gè)頁(yè)面。

首先，我們需要安裝 @react-navigation/stack

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

通過(guò)createStackNavigator方法創(chuàng)建Stack對(duì)象，這個(gè)對(duì)象有兩個(gè)屬性:Screen和Navigator,Screen的子節(jié)點(diǎn)就是導(dǎo)航器的路由。

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還可以通過(guò)更多的屬性進(jìn)行改變,比如:

{
    title: title,
    headerStyle: {
      backgroundColor: '#1E90FF',
      // elevation設(shè)置為零可以去掉header下部的線
      // 那條線實(shí)際上就是header高于其他部分的視覺(jué)效果
      elevation: 0,
      shadowOpacity: 0,
    },
    headerBackTitle: 'Return',
    headerTintColor: 'white',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerTitleAlign: 'center',
  };

切換頁(yè)面并傳遞參數(shù)

示例如下

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"
        // 如果要重復(fù)進(jìn)入同一個(gè)頁(yè)面，需要將navigate改為push
        // 即 navigation.push('Details'),否則不會(huì)起作用
        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>
  );
}

特殊地，如果要傳遞參數(shù)到被嵌套的頁(yè)面，比如SettingsScreen是MineScreen上的導(dǎo)航器內(nèi)的頁(yè)面，如果要傳遞到SettingsScreen

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

React Navigation 生命周期事件

React Navigation在窗口狀態(tài)發(fā)生改變的時(shí)候，提供了相應(yīng)的事件：'focus' 和 'blur'
可以通過(guò)如下方法監(jiān)聽(tīng)事件，并在窗口狀態(tài)發(fā)生變化的時(shí)候進(jìn)行相應(yīng)的處理

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 過(guò)程中的總結(jié)，還有一些方法的注意事項(xiàng)，基本都可以在官方文檔找到答案

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容