工具:参考官网上的工具,一定要按照官网上工具“版本”下载,为了避免一些不必要的麻烦,切记切记!android studio本人采用的是3.4.2的版本,其余都是官网上推荐的版本。采用的API是29!!!(低版本的AS和低版本的API出现莫名其妙的错误,把我拖死了一个礼拜,天天改bug,换成上面的AS和api后直接编译过去,我真的是TMD,GRD!
步骤:
第一步:最好自己编写package.json文件,这样子你可以根据自己的需要选择想要的RN的版本(本人之前就是直接在AS里面Terminal输入npm init,它默认你安装最新的RN,哇,RN改版一次,那就是毁天灭地啊,出现的问题让你后怕。。。)。
package.json:
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "yarn react-native start",
"bundle-android": "react-native bundle --platform android --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --dev false"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.1"
}
}
第二步:在AS中的Terminal输入
npm add react-native
然后按照官网上的步骤安装指定版本的react
npm add react@xxx
第三步:
3.1在app的build.gradle中添加一下依赖,第二个依赖是因为AS报缺少某个组件导致
implementation "com.facebook.react:react-native:+"
implementation 'androidx.legacy:legacy-support-v4:+'
3.2在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 “allprojects” 代码块中:
allprojects {
repositories {
maven {
url "$rootDir/node_modules/react-native/android"
}
...
}
...
}
(本人之前个人笔记本安装的就是低版本的AS和低版本的API,然后只要同步就有冲突,幸好单位配了一台电脑,装了高版本的AS和API,否则我真的是遥遥无期,我都想哭了。。。还有切记:这个 url "$rootDir/node_modules/react-native/android"千万不要抄官网的,你抄我的都比官网强,官网几个/…/搞死你没商量)。
第四步:在 AndroidManifest.xml 清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
(这个我看了很多别人的介绍,基本都是这样了,没有问题)
第五步:创建index.js文件(老版本是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('MyReactNativeApp', () => HelloWorld);
(最后一句注册,一定要记得修改,把“MyReactNativeApp”修改成你自己的项目名称,切记切记啊)
第六步:配置权限以便开发中的红屏错误能正确显示
你自己希望这个红屏通知能在哪个活动页面显示,那你就写在哪个页面,比如你可以写在MainActivity页面,我就是写在MainActivity页面的(本人是写在MainActivity页面,然后通过按钮,从原生的MainActivity页面调到RN页面上)
private final int OVERLAY_PERMISSION_REQ_CODE = 1;
在OnCreate方法中写如下代码
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
然后再MainActivity中重写以下方法
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted
}
}
}
}
为了让大家能看懂,我还是附上MainActivity的代码吧,少侠们,接好!
public class MainActivity extends AppCompatActivity {
private final int OVERLAY_PERMISSION_REQ_CODE = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this,MyReactActivity.class);
startActivity(intent);
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
}
第七步:创建MyReactActivity,就是为了启动RN界面的代码!!!激动不?
public class MyReactActivity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
return "HelloWorld05";
}
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this,getMainComponentName());
}
}
在getMianComponentName()的方法中一定要记得返回自己的,自己的,自己的项目名称!!!切记切记切记啊!我采用的案例是我自己的项目名称“HelloWorld05”,你们把这个改成自己的项目名称。
第八步:创建MyApplication,这个在官网中是看不到的,我要不是多看几篇文档,我玩个球。。。
不多说,附上代码
public class MyApplication extends Application implements ReactApplication {
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
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;
}
}
在清单文件中一定要把Application的名字和MyReactActivity注册哟!!!!
我不放心你们,我把我的带给你瞅瞅
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.helloworld05">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MyApplication"
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" />
<activity android:name=".MyReactActivity"></activity>
</application>
</manifest>
基本已经完成了,但是还是没有完成!最后一个重点就是,为了防止出现红屏显示什么不能加载script的,一定要记得最后一步!
在main下面创建assets文件夹
然后在AS中的Terminal输入
react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false
如果成功了,就会在assets文件夹中生产一个文件——index.android.bundle文件
好了,最后在Terminal输入npm start,然后再像以前运行andriod程序一样的方式,运行它吧!
希望我能帮助大家,真的不容易啊,我都想哭死了,React Native的官方文档真的不行,facebook也是一个大公司了,这个文档怎么能这样?!这么坑的吗?