Android原生项目转RN项目步骤
来源:互联网 发布:网络的利与弊素材 编辑:程序博客网 时间:2024/06/05 05:04
思路:官文是采用在项目基础上生成React结构,但问题颇多并不靠谱。生成React-Native项目然后替换android包更方便快捷。当前转换基于0.48版本。
替换项目
删除RN项目下android文件夹,将原生项目复制到RN项目路径下,并改名为android
配置settings.gradle
在最上方添加
rootProject.name = '项目名'
项目build.gradle中添加maven依赖
allprojects { repositories { jcenter() mavenLocal() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } }}
模块中gradle设置
将所有模块gradle中的version都统一为23
compileSdkVersion 23buildToolsVersion "23.0.1"
app.gradle增加ndk限制
defaultConfig { ... ndk { abiFilters "armeabi-v7a", "x86" }}
app.gradle增加依赖
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules ...}
Application配置
需要注意的是0.48正式版新增了一个getJSMainModuleName方法来定位主模块入口
public class App extends Application implements ReactApplication{ private static App mApp; public static App getInstance() { return mApp; } @Override public void onCreate() { super.onCreate(); mApp = this; //react-native SoLoader.init(this, /* native exopackage */ false); } //初始化react-native 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(), ); } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }}
测试Activity设置
注意,一定要在根目录进行
public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "Yuwen"; }}
Manifest.xml配置
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.tfedu.yuwen"> <!--必要权限--> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_SETTINGS" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!--不要忘记设置name--> <application android:name=".App" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <!-- React测试页面 --> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <!-- React设置页面 --> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application></manifest>
运行
所有设置配置好后在根目录下执行指令react-native run-android就能运行了~
阅读全文
0 0
- Android原生项目转RN项目步骤
- React Native 嵌入原生项目混合开发-自定义RN Activity
- RN入门-新建rn项目
- Android项目中嵌入RN常见问题汇总
- 集成RN到原有的Android项目
- RN项目环境搭建
- Native 集成 RN项目
- rn 组件和项目
- RN 项目使用 stetho
- RN开源项目
- android原生项目整合ReactNative
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- React Native 嵌入原生项目混合开发-多个RN Activity
- android项目开发步骤
- Mac+AS2.2.+ReactNative0.41.2在原生Android项目中嵌入ReactNative的详细步骤
- RN嵌入到原生Android应用
- 原生android工程实现RN集成
- RN实战项目简介(一)
- HTML网页+nodejs实现websocket
- 数字图像处理之图像显示基础
- ListView失去焦点怎么处理
- IOCP模型与网络编程
- ReactNative学习之Props(属性)
- Android原生项目转RN项目步骤
- 缓存收录一: iOS离线缓存方案
- 自定义view(自定义属性)
- 简单Struts2框架搭建
- 小白自定义View
- 最大子序列和问题
- 如何在Linux上检查SSH的版本
- 自定义view点击生成随机数
- Collections.sort()坑!!!