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

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

第一步：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 鏡像以加速后面的過程

$ 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

至此就可以通過命令行創(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打開并編譯

ios：ios項(xiàng)目源代碼

node_modules：react native用到的模塊以及自己添加的第三方react native組件

package.json：類似于項(xiàng)目的配置文件

運(yùn)行項(xiàng)目

確保開啟了模擬器或通過usb連接了真機(jī)
通過adb連接手機(jī)并設(shè)置http端口號

$ 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正是用來承載你的 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ù)對應(yīng)的提示安裝指定版本的Reac依賴愧驱，注意一定要嚴(yán)格按照提示所給出的版本號安裝慰技，否則容易出錯(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清單文件

<!--一般僅用于在開發(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中注冊一個(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,
  },
});
//注冊一個(gè)名為MyReactNativeApp的組件惫确，
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

2）在Android項(xiàng)目中新建一個(gè)activity手报，集成DefaultHardwareBackBtnHandler接口蚯舱，將index.js中注冊的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程序入口文件 對呀index.js
        .addPackage(new MainReactPackage())
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();
    //對應(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程序入口文件 對呀index.js
  }
};
@Override
public ReactNativeHost getReactNativeHost() {
  return mReactNativeHost;
}

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

3)用來承載RN的Activity繼承ReactActivity,實(shí)現(xiàn)getMainComponentName方法返回對應(yīng)js端AppRegistry注冊組件時(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)行成功后揍鸟，你可以通過搖晃設(shè)備或是選擇 iOS 模擬器的"Hardware"菜單中的"Shake Gesture"選項(xiàng)來打開開發(fā)菜單兄裂。另外，如果是在 iOS 模擬器中運(yùn)行阳藻，還可以按下Command? + D 快捷鍵晰奖，Android 模擬器對應(yīng)的則是Command? + M（windows 上可能是 F1 或者 F2），或是直接在命令行中運(yùn)行adb shell input keyevent 82來發(fā)送菜單鍵命令腥泥。

開發(fā)菜單.png

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

image.png

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

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

image.png

ios端類似

刷新js代碼

選擇開發(fā)菜單中的Enable Live Reload可以開啟自動(dòng)刷新,對js代碼進(jìn)行修改后矛纹，點(diǎn)擊保存臂聋，app中的RN頁面就會(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文件，一般來說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 是否為開發(fā)版本瞎访，打正式版的安裝包時(shí)我們將其賦值為false

為簡化打包命令，可將bundle命令在package.json的scripts對象中配置吁恍，如下圖：

package.json

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

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

apk打包不需要講解了

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

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

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

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

第二步：react native環(huán)境搭建

1.安裝Node,Watchman依賴

2.安裝yarn巩螃，React Native 的命令行工具（react-native-cli）

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

創(chuàng)建了一個(gè)名為 `AwesomeProject` 的新項(xiàng)目

運(yùn)行項(xiàng)目

運(yùn)行Android項(xiàng)目

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

四.調(diào)試

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

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

刷新js代碼

屏蔽黃屏警告

五.打包

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

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

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

第二步：react native環(huán)境搭建

1.安裝Node,Watchman依賴

2.安裝yarn巩螃，React Native 的命令行工具（react-native-cli）

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

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

運(yùn)行項(xiàng)目

運(yùn)行Android項(xiàng)目

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

四.調(diào)試

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

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

刷新js代碼

屏蔽黃屏警告

五.打包

創(chuàng)建了一個(gè)名為 `AwesomeProject` 的新項(xiàng)目