初步認識 React Native 從環境到打包安卓

簡單說說 React Native的幾個優點

1.跨平臺

2.開發成本低

3.性能高

4.支持動態更新

用了 React Native 有哪些好處呢，就是一套代碼同時可以在Android和ios上應用，提高了代碼的複用率

 

搭建開發環境

1.需要安裝Note.js

2.需要安裝React Native 的命令行工具 React Native Command Line

3.開發安卓的Android Studio /  開發ios 的X Code

在Windows平臺上搭建React Native的開發環境

先安裝Node.js   https://nodejs.org/en/download

安裝教程如下

https://www.runoob.com/nodejs/nodejs-install-setup.html

安裝成功之後我們在安裝React Native的命令行工具

npm install -g react-native-cli

react-native --help命令來查看 RN支持的命令

//終端的顯示

Microsoft Windows [版本 10.0.17134.1]
(c) 2018 Microsoft Corporation。保留所有權利。
//查看版本 查看node.js是否安卓成功
C:\Users\Administrator>npm -v
6.13.4
//安裝react native 的環境
C:\Users\Administrator>npm install -g react-native-cli

C:\Users\Administrator\AppData\Roaming\npm\react-native -> 

C:\Users\Administrator\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ [email protected]
added 72 packages from 25 contributors in 66.181s

之後呢就安裝我們的Android Studio

創建我們的第一個RN項目

打開終端輸入 react-native init +項目名

創建完成後目錄是這樣的

將我們的android studio打開 加載目錄下的android目錄

這是加載js的配置

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }
        //這裏是加載我們的運行的第一個頭文件
        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
  }

  /**
   * Loads Flipper in React Native templates.
   *
   * @param context
   */
  private static void initializeFlipper(Context context) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

打開終端保證設備連接，調到我們項目的目錄，執行 npm install

在執行react-native run-android 即可安裝到我們的設備上