react-native整合+填坑記錄
阿新 • • 發佈:2019-01-29
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