React native環(huán)境配置，調(diào)試及打包

一.環(huán)境搭建（mac，Android）

官網(wǎng)搭建文檔

第一步：Android環(huán)境搭建

第一步肯定是先把Android studio，jdk，sdk等Android環(huán)境搭建完成
Android環(huán)境搭建

第二步：react native環(huán)境搭建
1.安裝Node,Watchman依賴

安裝命令：

$ brew install node
$ brew install watchman

設(shè)置 npm 鏡像以加速后面的過(guò)程

$ npm config set registry https://registry.npm.taobao.org --global
$ npm config set disturl https://npm.taobao.org/dist --global
2.安裝yarn，React Native 的命令行工具（react-native-cli）

安裝命令：

$ npm install -g yarn react-native-cli

設(shè)置鏡像源：

$ yarn config set registry https://registry.npm.taobao.org --global
$ yarn config set disturl https://npm.taobao.org/dist --global

至此就可以通過(guò)命令行創(chuàng)建一個(gè)新的項(xiàng)目了

二.創(chuàng)建項(xiàng)目

創(chuàng)建了一個(gè)名為 AwesomeProject 的新項(xiàng)目
$ react-native init AwesomeProject

安裝成功后項(xiàng)目的目錄結(jié)構(gòu)如下：


項(xiàng)目結(jié)構(gòu)

其中常用的如下：

  • android：顧名思義，里面存放的就是Android的項(xiàng)目工程代碼，可直接用Android studio打開(kāi)并編譯
  • ios：ios項(xiàng)目源代碼
  • node_modules：react native用到的模塊以及自己添加的第三方react native組件
  • package.json：類似于項(xiàng)目的配置文件
運(yùn)行項(xiàng)目

確保開(kāi)啟了模擬器或通過(guò)usb連接了真機(jī)
通過(guò)adb連接手機(jī)并設(shè)置http端口號(hào)

$ adb devices
$ adb reverse tcp:8081 tcp:8081
運(yùn)行Android項(xiàng)目
$ cd AwesomeProject
$ react-native run-android

還可以直接使用Android studio編譯android目錄下的源代碼運(yùn)行
分兩步：
1.執(zhí)行命令
yarn start或者npm start啟動(dòng)react native服務(wù)
2.Android studio 運(yùn)行app

三.現(xiàn)有應(yīng)用集成React native

主要步驟：

1.配置好 React Native 依賴和項(xiàng)目結(jié)構(gòu)。
2.創(chuàng)建 js 文件，編寫 React Native 組件的 js 代碼。
3.在應(yīng)用中添加一個(gè)RCTRootView。這個(gè)RCTRootView正是用來(lái)承載你的 React Native 組件的容器。
4.啟動(dòng) React Native 的 Packager 服務(wù)，運(yùn)行應(yīng)用。
5.驗(yàn)證這部分組件是否正常工作。

1.新建一個(gè)空目錄存放React native項(xiàng)目，在該目錄下新建一個(gè)/android的子目錄，將現(xiàn)有項(xiàng)目源代碼放入該目錄下。
2. 安裝javaScript依賴包，在項(xiàng)目根目錄下新建package.json文件,填充以下內(nèi)容

{
    "name": "ReactNativeTest", 
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "yarn react-native start"
    }
  }

3. 使用npm獲取yarn安裝 React 和 React Native 模塊
在項(xiàng)目跟目錄下輸入命令：

$ yarn add react-native //默認(rèn)是安裝最新版

安裝成功后根據(jù)對(duì)應(yīng)的提示安裝指定版本的Reac依賴，注意一定要嚴(yán)格按照提示所給出的版本號(hào)安裝，否則容易出錯(cuò)，如圖：


yarn add react-native

按給出提示安裝 react@16.8.6

$ yarn add react@16.8.6

4. 在Android項(xiàng)目中配置react native
1）app 的build.gradle 中添加依賴

dependencies {
...
implementation "com.facebook.react:react-native:+" // From node_modules
}

2）在項(xiàng)目的 build.gradle 文件中為 React Native 添加一個(gè) maven 依賴的入口，必須寫在 allprojects代碼塊中:

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        ...
    }
    ...
}

3）配置權(quán)限

<uses-permission android:name="android.permission.INTERNET" />

4）添加DevSettingsActivity清單文件

<!--一般僅用于在開(kāi)發(fā)時(shí)從 Packager 服務(wù)器刷新 JavaScript 代碼,發(fā)布正式包時(shí)可以不用-->
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

5）適配Android 8.0以上的網(wǎng)絡(luò)適配
創(chuàng)建在xml下network_security_config文件
app/src/debug/res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- allow cleartext traffic for React Native packager ips in debug -->
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>

app/src/release/res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- deny cleartext traffic for React Native packager ips in release -->
  <domain-config cleartextTrafficPermitted="false">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>

在AndroidManifest.xml中添加：

<application
  android:networkSecurityConfig="@xml/network_security_config">
 ...
</application>

5. 代碼集成

  • 方式一：
    1)創(chuàng)建index.js文件
    index.js文件為react native的入口文件，在index.js中注冊(cè)一個(gè)組件，
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
//注冊(cè)一個(gè)名為MyReactNativeApp的組件，
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

2）在Android項(xiàng)目中新建一個(gè)activity，集成DefaultHardwareBackBtnHandler接口，將index.js中注冊(cè)的MyReactNativeApp配置到activity中。

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
  private ReactRootView mReactRootView;
  private ReactInstanceManager mReactInstanceManager;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setCurrentActivity(this)
        .setBundleAssetName("index.android.bundle")//jsbundle名稱
        .setJSMainModulePath("index")//react native程序入口文件 對(duì)呀index.js
        .addPackage(new MainReactPackage())
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();
    //對(duì)應(yīng)index.js中的AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);
     mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
     
    //將helloworlde組件中的ui渲染到MainActivity中
    setContentView(mReactRootView);

  }

  @Override
  public void invokeDefaultOnBackPressed() {
    super.onBackPressed();
  }
  • 方式二：
    1）與方式一相同，創(chuàng)建index.js文件
    2）在MainApplication中實(shí)現(xiàn)ReactApplication接口
public class MainApplication extends Application implements ReactApplication {
public static Context mContext;
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
  }
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage()
    );
  }
  @Override
  protected String getJSMainModuleName() {
    return "index";//react native程序入口文件 對(duì)呀index.js
  }
};
@Override
public ReactNativeHost getReactNativeHost() {
  return mReactNativeHost;
}

@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false);
  mContext = getApplicationContext();
}
}

3)用來(lái)承載RN的Activity繼承ReactActivity,實(shí)現(xiàn)getMainComponentName方法返回對(duì)應(yīng)js端AppRegistry注冊(cè)組件時(shí)的組件名稱

public class MainActivity extends ReactActivity {

 /**
  * Returns the name of the main component registered from JavaScript.
  * This is used to schedule rendering of the component.
  */
 @Override
 protected String getMainComponentName() {
   return "VideoProject";
 }

 @Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
 }

集成完成，運(yùn)行 yarn start啟動(dòng)rn服務(wù)后，運(yùn)行app

四.調(diào)試

  • 遠(yuǎn)程調(diào)試

運(yùn)行成功后，你可以通過(guò)搖晃設(shè)備或是選擇 iOS 模擬器的"Hardware"菜單中的"Shake Gesture"選項(xiàng)來(lái)打開(kāi)開(kāi)發(fā)菜單。另外，如果是在 iOS 模擬器中運(yùn)行，還可以按下Command? + D 快捷鍵，Android 模擬器對(duì)應(yīng)的則是Command? + M（windows 上可能是 F1 或者 F2），或是直接在命令行中運(yùn)行adb shell input keyevent 82來(lái)發(fā)送菜單鍵命令。

開(kāi)發(fā)菜單.png

選中菜單的Debug js Remotely可進(jìn)入遠(yuǎn)程調(diào)試，瀏覽器會(huì)自動(dòng)打開(kāi)http://localhost:8081/debugger-ui/的網(wǎng)頁(yè)，按F12進(jìn)入調(diào)試模式，將會(huì)出現(xiàn)js的log，如下圖所示：
image.png

  • 使用Android Studio調(diào)試或者XCode

運(yùn)行成功后，通過(guò)USB連接電腦，在as的logcat欄查看RN中的log日志，并可通過(guò)篩選ReactNativeJS過(guò)濾js的log。

image.png

ios端類似

  • 刷新js代碼

選擇開(kāi)發(fā)菜單中的Enable Live Reload可以開(kāi)啟自動(dòng)刷新,對(duì)js代碼進(jìn)行修改后，點(diǎn)擊保存，app中的RN頁(yè)面就會(huì)自動(dòng)刷新

  • 屏蔽黃屏警告
import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

五.打包

  • android
$ react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/
  • ios
$ react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

（1）--entry 入口js文件，一般來(lái)說(shuō)android系統(tǒng)就是index.android.js，ios系統(tǒng)就是index.ios.js，或者統(tǒng)一的index.js
（2）--bundle-output 生成的bundle文件路徑,Android的路徑一般在項(xiàng)目的assets路徑下，ios隨意，只需在ios項(xiàng)目里配置好bundle文件路徑就行
（3）--platform 平臺(tái)
（4）--assets-dest 圖片資源的輸出目錄
（5）--dev 是否為開(kāi)發(fā)版本，打正式版的安裝包時(shí)我們將其賦值為false

為簡(jiǎn)化打包命令，可將bundle命令在package.json的scripts對(duì)象中配置，如下圖：


package.json

打包時(shí)先進(jìn)行jsBundle的打包，再進(jìn)行apk的打包

$ yarn bundle-android
// or $ npm bundle-android

apk打包不需要講解了

最后編輯于 ：
?著作權(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ù)。

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