1. 程式人生 > >react-native整合+填坑記錄

react-native整合+填坑記錄

Gradle Compile

compile "com.facebook.react:react-native:+"

許可權新增

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

建立Activity

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler{

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index.android") // index.android.js去掉js
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "testpro", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

}

專案根目錄新建index.android.js

'use strict';

import React, {
  Component,
} from 'react';

import {
    AppRegistry,
  View,
  Text
} from 'react-native';

class MyAwesomeApp extends React.Component {
    constructor(props){
        super(props);
    }
  render() {
    return (
      <View>
        <Text >Hello, World</Text>
      </View>
    )
  }
}


AppRegistry.registerComponent('testpro', () => MyAwesomeApp);

生成node_moudle

專案根目錄:
nmp init
npm install --save react react-native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

此時,你的工程中已經生成了package.json檔案,然後將“start": "node node_modules/react-native/local-cli/cli.js start"新增到scripts節點下。

在project的build.gradle檔案下新增如下:

新增NDK的支援

註冊除錯Activity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>



1、name保持一致

Acitivity、index.android.js和package.json中的name ‘testpro’保持一致;

2、生成index.android.bundle

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

3、connection time out或者failed to connect...

1. 專案跟目錄執行 npm start啟動服務;

2.確保和電腦在同一區域網下;

4、react等其他moudle not found

升級react-native版本,react-nativeupgrade