1. 程式人生 > >Android在原生整合react native

Android在原生整合react native

react native使用方式有兩種:
1:直接新建一個react native專案
2:在已經存在的原生專案中整合react native專案。
今天主要講解第二種方式的步驟。
1:新建Android原生專案
2:在原生專案的根目錄下執行npm init 輸入package名字我是用的Android專案的名字這裡是testApp,其他配置會直接寫入到package.json中
3:npm install –save react react-native
安裝node_modules包
4:開啟package.json 將

"start": "node node_modules/react-native/local
-cli/cli.js start"

加入到scripts裡面
如下:

{
  "name": "testapp",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "",
  "license
": "ISC", "dependencies": { "react": "^16.2.0", "react-native": "^0.50.4" } }

5:在根目錄下新建index.js
如下:

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.hello}>Hello, My Hybrid App!</Text>
            </View>
        )
    }
}
AppRegistry.registerComponent('testApp'
, () => App);

檔案目錄結構:
9F867E6B-5703-4EF5-946A-65D52C6EF0CC.png

6:在app/build.gradle中配置

 compile "com.facebook.react:react-native:+" // From node_modules.

7:android新建MyReactActivity整合AppCompatActivity實現DefaultHardwareBackBtnHandler。
其中onCreate方法中

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.bundle")
                .setJSMainModulePath("index")//0.5以後使用這個方法 因為版本發生變化setJSMainModuleName("index.android")這個方法沒有了
/**另外有些人這裡配置index.android其實配置index.android或者index都可以 主要是要保持這裡配置的名字和步驟5中新建的檔名字一致即可**/
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意這裡的HelloWorld必須對應“index.js”中的
        // “AppRegistry.registerComponent()”的第一個引數
      mReactRootView.startReactApplication(mReactInstanceManager, "testApp", null);
        setContentView(mReactRootView);
    }

8:manifest.xml裡面配置

<uses-permission android:name="android.permission.INTERNET" />
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        <activity
            android:name=".MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        </activity>

9:執行現在根目錄下啟動node
執行npm start
然後android studio執行。如圖:
andoridtoRN.gif
完成程式碼GitHub:https://github.com/wuyunqiang/AndroidToRN
僅供參考。
如要執行需要下載node_modules.