android 添加React Native支持更新版
前言
之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,这里针对最新的版本做一个新的讲解。
环境搭建
官方文档
集成步骤
用android studio创建一个基本的android hello world程序。
在项目根目录中通过npm向导生成package.json文件,在cmd中输入命令:
npm init
在package.json文件中添加启动脚本:
"start": "node node_modules/react-native/local-cli/cli.js start"
注:这里可能会报一个json的错误,请仔细检查json。附上我本地的实例:
{
"name": "shopping",
"version": "0.0.1",
"description": "shopping",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"author": "xiangzhihong",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-native": "^0.40.0"
}
}
添加react-native npm依赖,在命令行输入:
npm install react react-native --save
创建index.android.js文件,也可以从之前的项目中拷贝。
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
在你app的build.gradle文件中添加react native依赖库。
compile "com.facebook.react:react-native:+"
在你project的build.gradle文件中添加react native路径。
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"
}
}
}
注:这里可能报一个错误,兼容的问题:
Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
解决方法:在你的app(应用程序的build.gradle中添加下面的配置脚本,不是项目的那个build.gradle)。
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
修改AndroidManifest.xml文件中添加权限:
<uses-permission android:name="android.permission.INTERNET" />
添加AndroidReactActivity:
package com.rn.shopping;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
import static com.facebook.react.common.ApplicationHolder.getApplication;
public class AndroidReactActivity 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")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
build android,如果报错,请自行检查错误原因。 将AndroidReactActivity加入AndroidManifest.xml文件中:
<activity
android:name=".AndroidReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.Dialog">
</activity>
将DevSettingsActivity配置加入到AndroidManifest.xml文件中:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
最终完整的AndroidManifest.xml文件
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.platform.ourplam.androidreacttest">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".AndroidReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.Dialog">
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
在MainActivity中添加Button,添加点击事件启动AndroidReactActivity作为我们的测试。
Intent intent = new Intent(MainActivity.this, AndroidReactActivity.class);
startActivity(intent);
最后我们使用命令启动npm就好了:
npm start
注:如果你遇到下面的问题,这是由于不兼容的问题,需要将编译环境改一下:
Method 'void android.support.v4.NET.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule'
解决方法:
com.android.support:appcompat-v7:23.0.1
附:https://cloud.tencent.com/developer/article/1035990 https://cloud.tencent.com/developer/article/1035975
- 原生Ajax总结
- 多个知名化妆品牌现假官网,域名保护该受重视
- JavaScript操作Cookie
- Windows下Go环境安装
- Angular定义服务-Learn By Doing
- JS魔法堂:不完全国际化&本地化手册 之 理論篇
- mysql替换某个字段中的某个字符
- Angular企业级开发(1)-AngularJS简介
- PHP在Apache下500错误
- mysql 学习笔记
- MongoDB学习系列(2)--使用PHP访问MongoDB
- (cljs/run-at (JSVM. :browser) "命名空间就这么简单")
- Angular企业级开发(10)-Smart Table插件开发
- 安装Ubuntu时分区选择
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Impala MetaData问题
- 聚焦 Android 11: UI 与 Compose
- 如何给Flutter界面切换实现点特效
- 恢复 RecyclerView 的滚动位置
- android实现指纹识别功能
- Flutter上线项目实战记录之路由篇
- 使用 Paging 3 实现分页加载
- Android实现圆形渐变加载进度条
- Kotlin 协程和 Android SQLite API 中的线程模型
- Android轮播图点击图片放大效果的实现方法
- 隐私策略更新 | Android 11 应用兼容性适配
- Android android:exported = true 用法详解
- Android WorkManager浅谈
- 详解Android 8.0以上系统应用如何保活
- 秒级去重:ClickHouse在腾讯海量游戏营销活动分析中的应用