集成到现有原生应用
-
集成到现有原生应用
React Native 和原生项目放在同一目录下
之前AwesomeProject下边有一个Android项目 这里边就直接删除就可以了
然后使用软联把原生项目关联起来就OK了。ln -s /android/ /AwesomeProject
-
配置 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" }
-
配置权限
接着,在 AndroidManifest.xml 清单文件中声明网络权限:
如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明: -
核心代码 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项目!!!