Learn once, write anywhere.

什么是 react-native？

React Native 是由 Facebook 创立和开发的跨平台框架。它容许应用 JavaScript 创立 Android 和 iOS 应用程序。

RN 与原生技术

RN 的劣势

1. 疾速地开发和迭代。
   RN 最大的劣势是热重载，开发人员节俭了代码编译的工夫，而在应用原生编程语言时，这须要更长的工夫。对代码所做的更改能够在几秒钟内看到，而不是像原生技术那样几分钟。
   React Native 开发的利用反对热更新，因为 React Native 的产物是 bundle 文件，其实实质上就是 JS 代码。在 App 启动的时候就会去服务器上获取 bundle 文件，咱们只须要更新 bundle 文件，从而使得 App 不须要从新返回商店下载包体就能够进行版本更新，开发者能够在用户无感知的状况下进行性能迭代或者 bug 修复。然而值得注意的是，AppStore 禁止热更新的性能中有调用公有 API、篡改原生代码和扭转 App 的行为。
2. 成本低
   应用原生技术开发 Android 和 iOS 利用，须要相应的 Android 工程师和 iOS 工程师，也同时保护两套代码，而 RN 只须要一位会编写 JavaScript 且理解 react 框架的前端工程师。
3. 上手快
   相比于原生开发，JavaScript 学习成本低、语法灵便。容许让 Web 开发者更多地基于现有教训开发 App。React Native 只需应用 JavaScript 就能编写挪动原生利用，它和 React 的设计理念是一样的，因而能够毫不夸大地说：你如果会写 React，就会写 React Native!

原生体验

尽管 RN 应用 JavaScript 编写代码，然而它应用的是原生裸露进去的 API 和 UI 组件。
RN 是在 react 根底上运行的，编写代码时，能够应用 react 调用 React Native 的 Components 来创立和原生一样外观和感觉的视图。在运行时，React Native 会为这些组件创立相应的 Android 和 iOS 视图。因而，体验和性能足以媲美原生利用

RN 的有余

React Native 不反对原生 API 和 SDK，即如果您想拜访相机、应用加强事实、语音助手或 SDK 进行挪动领取，这迫使开发人员本人创立原生模块或应用 Java/Kotlin (Android) 或 Swift/Objective-C (iOS) 开发“bridge”，并重大减少软件开发工夫。而原生技术则没有这种困扰。

RN 利用的体验尽管能够媲美原生利用，然而在性能上却不迭原生利用，它的一部分性能会耗费在 js 和原生的转化和通信上。

React-native 原理

React Native 须要一个 JS 的运行环境，因为 React Native 会把利用的 JS 代码编译成一个 JS 文件（x x.bundle），React Native 框架的指标就是解释运行这个 JS 脚本文件，如果是 Native 拓展的 API，则间接通过 bridge 调用 Native 办法，最根底的比方绘制 UI 界面，映射 Virtual DOM 到实在的 UI 组件中。

如何创立自定义的原生模块

Android

1. 创立并编写原生模块
   首先是在包名（android/app/src/main/java/com/your-app-name/ 夹下）创立 CalendarModule.java Java 文件。

   package com.your-app-name; // replace com.your-app-name with your app’s name
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import java.util.Map;
   import java.util.HashMap;
   import android.util.Log;
   
   public class CalendarModule extends ReactContextBaseJavaModule {CalendarModule(ReactApplicationContext context) {super(context);
     }
     @Override
     public String getName() {return "CalendarModule";}
   
     @ReactMethod // 将办法导出到 js 中
     public void createCalendarEvent(String name, String location) {
       Log.d("CalendarModule", "Create event called with name:" + name
       + "and location:" + location);
     }
   }

2. 注册模块
   编写原生模块后，须要创立 MyAppPackage.java 向 React Native 注册

   package com.your-app-name; // replace your-app-name with your app’s name
   import com.facebook.react.ReactPackage;
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.uimanager.ViewManager;
   
   import java.util.ArrayList;
   import java.util.Collections;
   import java.util.List;
   
   public class MyAppPackage implements ReactPackage {
   
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();
   }
   
   @Override
   public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();
   
       modules.add(new CalendarModule(reactContext));
   
       return modules;
   }
   
   }

3. 将注册好的包增加的包列表
   在android/app/src/main/java/com/your-app-name/MainApplication.java找到 getPackages() 办法，通过 add 办法将你的包增加到包列表。

   @Override
     protected List<ReactPackage> getPackages() {@SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // below MyAppPackage is added to the list of packages returned
    packages.add(new MyAppPackage());
    return packages;
     }

4. 在 js 中调用

   import {NativeModules} from 'react-native';
   const {CalendarModule} = NativeModules;
   CalendarModule.createCalendarEvent('foo', 'bar');

   IOS

1. 创立次要的自定义原生模块头文件和实现文件；.h 文件是用于类的公共申明（如 API）的头文件，而.m 文件是公有实现。

创立头文件 RCTCalendarModule.h，

//  RCTCalendarModule.h
#import <React/RCTBridgeModule.h>
@interface RCTCalendarModule : NSObject <RCTBridgeModule>
@end

2. 创立实现文件 RCTCalendarModule.m

// RCTCalendarModule.m
#import "RCTCalendarModule.h"
#import <React/RCTLog.h>

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

@end

3.js 拜访

import {NativeModules} from 'react-native';
const {CalendarModule} = NativeModules;
CalendarModule.createCalendarEvent('testName', 'testLocation');

环境搭建

如何搭建 react-native 的开发环境

搭建 iOS 开发环境中可能会遇到的问题

1. pod install 时报错

// 设施: Macbook M1
-- Crash Report log information --------------------------------------------
See Crash Report log file under the one of following:
* ~/Library/Logs/DiagnosticReports
* /Library/Logs/DiagnosticReports
for more details.
Don't forget to include the above Crash Report log file in bug reports.

解决方案

参考 cocoaPods github 相干 issues