Getting started
目前 React Navigation 正在维护中,欢迎有兴趣参与或学习交流 React Native的小伙伴加入,一群群号:672509442(已满)。二群群号:670855726
在决定为你的项目使用 React Navigation 之前,你可能需要先阅读 缺点 — 这篇文章,它会帮助你理解我们所做出的权衡,以及我们认为这个库目前存在缺陷的地方
期待什么?
如果你已经熟悉了React Native,那么你可以快速上手React Navigation, 如果还没有,你可能需要先阅读 React Native Express (1-4章),读完后再回来。
本文档的* Fundamentals *章节中的内容是对 React Navigation 最重要的几方面的介绍。 应该足够让你了解如何构建典型的小型移动应用,并为你提供了需要深入了解 React Navigation 更高级部分的背景信息。
安装
在你的 React Native 项目中安装react-navigation
这个包
yarn add react-navigation
# or with npm
# npm install --save react-navigation
然后,安装 react-native-gesture-handler。 如果你使用 Expo,就什么都不需要做,他已经包含在 SDK 中 了, 否则:
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
Link 所有的原生依赖
react-native link react-native-gesture-handler
iOS 啥都不用做
为了完成 react-native-gesture-handler
在 Android 上的安装,请确保在 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项目请跳过)
如果在混合应用中使用 React Navigation(一个同时具有Swift / ObjC 和 React Native 的 iOS 应用程序),您可能会错过 Podfile 中的` RCTLinkingIOS </ code>子规范,新的RN项目已经默认安装了。 要添加此项,请确保Podfile如下所示:
pod 'React', :path => '../node_modules/react-native', :subspecs => [
. . . // other subspecs
'RCTLinkingIOS',
. . .
]
`
准备完毕, 继续阅读 "Hello React Navigation" 开始编码吧