1. 程式人生 > >react-native 導航器 react-navigation 3.x 使用

react-native 導航器 react-navigation 3.x 使用

React-navigation 介紹

  React Navigation 源於 React Native 社群對一個可擴充套件且易於使用的導航解決方案的需求,它完全使用 JavaScript 編寫。

安裝

在你的 React Native 專案中安裝 react-navigation 這個包(注意--save或者--save-dev一定要寫正確,連結原生庫是會根據package.json檔案中的dependenciesdevDependencies的記錄來連結所有需要連結的庫

yarn add react-navigation
# 或者使用npm
# npm 
install --save react-navigation

然後安裝 react-native-gesture-handler ,如過你正在使用 Expo ,那麼你可以跳過此步驟,因為他包含在SDK中,否則

yarn add react-native-gesture-handler
# 或者使用npm
# npm install --save react-native-gesture-handler

連結所有原生庫(注意一些老的教程和文件可能會提到rnpm link命令,此命令已過期不再使用,由下面這個命令代替)

react-native link

此時IOS就不需要其他步驟了,要完成針對Android的react-native-gesture-handler的安裝,請務必對 MainActivity.java 內容進行必要的修改

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() {
return "Example"; } + @Override + protected ReactActivityDelegate createReactActivityDelegate() { + return new ReactActivityDelegate(this, getMainComponentName()) { + @Override + protected ReactRootView createRootView() { + return new RNGestureHandlerEnabledRootView(MainActivity.this); + } + }; + } }

混合iOS應用程式(僅針對RN專案跳過)

如果您在混合應用程式(一個同時具有Swift / ObjC和React Native部分的iOS應用程式)中使用React Navigation,您可能會錯過RCTLinkingIOSPodfile中的子規範,該預設情況下會安裝在新的RN專案中。要新增此項,請確保您的Podfile如下所示:

 pod 'React', :path => '../node_modules/react-native', :subspecs => [

  . . . // other subspecs

  'RCTLinkingIOS',

  . . .

]