React Native 开发第二节-[集成到现有原生应用]

集成到现有原生应用

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项目！！！