Android项目集成ReactNativeMac版
来源:互联网 发布:淘宝店铺如何进货 编辑:程序博客网 时间:2024/06/07 08:58
http://www.jianshu.com/u/5e618c136b79
为了及时响应运营提出的需求,经各方讨论,决定把现有App的首页,部分地方用ReactNative来实现.前期的集成工作,已经顺利完成.
iOS端的App,采用cocoapod管理第三方库的方式,实现方式比较简单,网上正确教程很多.而Android集成中,需要注意的地方很多,而且网络上大部分教程,省略了很多需要注意的细节.刚刚开始Android学习的我,搜索不到详细入微的合适教程,纠结了良久,记录步骤如下.
首先,将npm创建项目的package.json文件和node_modules文件夹,拷贝到Android项目的根目录下,省略使用npm命令创建文件和重新下载模块的时间.文件层级如下图:
修改最外层的build.gradle文件,添加ReactNative的支持文件.
// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript { repositories { jcenter() } dependencies { classpath 'com.android.tools.build:gradle:2.3.2' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files }}allprojects { repositories { mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } }}
注意gradle:2.3.2版本号,要和Android Studio的版本一致(使用版本为2.3.2).
修改App文件夹内的build.gradle文件,修改用处说明如下图:
具体代码:
apply plugin: 'com.android.application'apply from: "../../node_modules/react-native/react.gradle"android { compileSdkVersion 25 buildToolsVersion "25.0.3" defaultConfig { applicationId "com.example.zhudong.rntest" minSdkVersion 16 targetSdkVersion 25 versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86" } } splits { abi { reset() universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86" } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' }}}dependencies { compile "com.facebook.react:react-native:+" // From node_modules. compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2'}
其中applicationId需要结合实际项目修改.注意,需要保证minSdkVersion最小值为16.
同步工程,可以在工程的External Libraries中看到添加成功的支持库react-native.
在和MainActivity同一级下新建继承至Application的类RNApplication,并实现接口ReactApplication.(包名和工程保持一致)
package com.example.zhudong.rntest;import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import java.util.Arrays;import java.util.List;/** * Created by zhudong on 2017/6/6. */public class RNApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return true; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, false); }}
修改MainActivity继承至ReactActivity,并实现寻找ReactNative模块的方法,return后的名字,需要和index.android.js文件中导出的模块名一致.
package com.example.zhudong.rntest;import com.facebook.react.ReactActivity;public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "navigation"; }}
最后在AndroidMainfest.xml中使用创建的RNApplication,并添加相应的权限.
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.zhudong.rntest"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <application android:name=".RNApplication" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application></manifest>
ok,到此就Android项目集成ReactNative已经大功告成.
回到项目根目录,用npm start命令启动RN接口,然后运行Android项目,就能看到index.android.js文件中设置的界面了.
如果是Android真机调试,需要保证手机和电脑共用一个网络,并将手机端口指向电脑的8081端口,设置参考React-Native开发(三)在Android真机上调试
iOS设备调试时,使用RN的Button控件点击后,出现如下警告:
`useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`.
解决方式:react-native 调用 TouchableOpacity (触摸透明) 时报了一个警告
遇到问题,请留言交流~
- Android项目集成ReactNativeMac版
- Android 项目集成 Freeline
- Android项目集成Weex
- android studio 项目集成butterknife
- Android项目集成信鸽推送
- 使用Hudson持续集成Android项目
- AAndroid_为android项目集成maven
- hudson+ant持续集成android项目
- 使用Hudson持续集成Android项目
- android FaceBook集成到项目中
- 使用Hudson持续集成Android项目
- 使用Hudson持续集成Android项目
- Android项目 集成 支付宝功能
- 在Android项目中集成AndroidAnnotations注解
- Android中项目中集成百度地图
- Android之原生项目集成React Native
- Android项目里集成Cordova详解
- Android项目集成信鸽推送过程详解
- Codeforces 814D-An overnight dance in discotheque
- ubuntu14.04,cmake编译opencv2.4.13
- Ubuntu Server 16.04 配置静态IP
- 调用百度头像比对接口引发的时区问题
- motion4
- Android项目集成ReactNativeMac版
- mysql 用drop和delete方法删除用户的区别
- 【转】三维点云数据集
- HDU-1176-免费馅饼【二维dp】
- maven打包项目
- RxBinding基本使用
- Java 调 C 中遇到的字符串转换
- Java Thread.yield是个巨大的坑
- Java高并发,如何解决,什么方式解决