整合到現有原生應用

1. 整合到現有原生應用
   React Native 和原生專案放在同一目錄下
   之前AwesomeProject下邊有一個Android專案 這裡邊就直接刪除就可以了
   然後使用軟聯把原生專案關聯起來就OK了。

       ln -s /android/  /AwesomeProject
   

   

2. 配置 maven

   在你的 app 中 build.gradle 檔案中新增 React Native 依賴:

   	dependencies {
   	    compile 'com.android.support:appcompat-v7:23.0.1'
   	    ...
   	    compile "com.facebook.react:react-native:+" // From node_modules
   	}
   
    
   

   如果想要指定特定的 React Native 版本，可以用具體的版本號替換 +，當然前提是你從 npm 裡下載的是這個版本。
   在專案的 build.gradle 檔案中為 React Native 新增一個 maven 依賴的入口，必須寫在 “allprojects” 程式碼塊中:

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

   這裡注意了 url “$rootDir/…/node_modules/react-native/android” 這個地方非常重要，如果你 之前整合過之前版本，這個地方配錯了，永遠編譯不出來最新版本jar,我就被坑到了，引以為戒！
   正確的路徑是：

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

3. 配置許可權

   接著，在 AndroidManifest.xml 清單檔案中宣告網路許可權:

   如果需要訪問 DevSettingsActivity 介面（即開發者選單），則還需要在 AndroidManifest.xml 中宣告:

4. 核心程式碼 ReactRootView
   我們還需要新增一些原生程式碼來啟動 React Native 的執行時環境並讓它開始渲染。首先需要在一個Activity中建立一個ReactRootView物件，然後在這個物件之中啟動 React Native 應用，並將它設為介面的主檢視。

   public class MyReactActivity extends Activity 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())
                   .setBundleAssetName("index.android.bundle")
                   .setJSMainModulePath("index")
                   .addPackage(new MainReactPackage())
                   .setUseDeveloperSupport(BuildConfig.DEBUG)
                   .setInitialLifecycleState(LifecycleState.RESUMED)
                   .build();
           // 注意這裡的MyReactNativeApp必須對應“index.js”中的
           // “AppRegistry.registerComponent()”的第一個引數
           mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
   
           setContentView(mReactRootView);
       }
   
       @Override
       public void invokeDefaultOnBackPressed() {
           super.onBackPressed();
       }
   }
   

   我們需要把 MyReactActivity 的主題設定為 Theme.AppCompat.Light.NoActionBar ，因為裡面有許多元件都使用了這一主題。

   <activity
     android:name=".MyReactActivity"
     android:label="@string/app_name"
     android:theme="@style/Theme.AppCompat.Light.NoActionBar">
   </activity>
   
   

   配置 MainApplication

   public class MainApplication extends Application implements ReactApplication {
   
     private static final DataTransferPackage transferPackage = new DataTransferPackage();
   
     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(),
             transferPackage
         );
       }
   
       @Override
       protected String getJSMainModuleName() {
         return "index";
       }
     };
   
     public static DataTransferPackage getTransferPackage() {
       return transferPackage;
     }
   
     @Override
     public ReactNativeHost getReactNativeHost() {
       return mReactNativeHost;
     }
   
     @Override
     public void onCreate() {
       super.onCreate();
       SoLoader.init(this, /* native exopackage */ false);
     }
   }
   

   到這裡就可以在你的Androidstudio上執行你的Android專案！！！