React Native移植原生Android

前端之家收集整理的这篇文章主要介绍了React Native移植原生Android前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
(一)前言

之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方的文档移植没有更新,最新版本集成方法已经发生很大变化啦~OK,今天我们用新版本进行走一遍流程,具体原来就不讲了,直接看移植步骤。

有关原理相关的知识点大家可以查看:http://www.lcode.org/?p=292

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)前提准备工作

①.首先我们有一个采用Gradle构建的Android应用项目,这个大家直接采用Android Stu@R_403_410@进行创建一个项目即可。我这边新建一个目录TestInte,然后采用Android Stu@R_403_410@创建一个android项目在该文件夹下面。具体如下:

②.电脑必须安装Node.js,具体安装使用方法(点击进入)

(三)Android项目相关配置

2.1 在我们Android项目的build.gradle中添加React Native依赖,然后同步,具体代码如下:

?
1
compile 'com.facebook.react:react-native:+'

2.2紧接着我们需要在项目AndroidManifest.xml中加入网络访问权限

<uses -permission android:name= "android.permission.INTERNET" />

该仅仅用于开发阶段从开发服务器加载最细的JavaScript代码,在正式发布版本中,如果有需要可以把该网络权限删掉。

(四)添加原生代码

在Android项目的MainActivity中,我们需要配置相关代码来进行启动运行React Native库。我这边直接采用>=0.18版本的写法了,

具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "testinte" ;
}
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
List<ReactPackage> getPackages() {
Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
}

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

(五)添加js

下面我们采用命令行,首先切换到项目的根目录上面(我的例子是切换到TestIntegrating目录下)

5.1.命令行运行npm init 运行截图如下:

该命令会创建一个package.json文件,并且提示我们输入一些信息,默认不输入即可,不过name必须要为全英文小写哦,具体结果执行结果如下:

5.2.接下来我们在在scripts标签那边添加如下代码:

"start" : "node node_modules/react-native/local-cli/cli.js start"

以及添加react依赖:"react": "15.0.2"和react-native依赖:"react-native": "^0.26.3",sans-serif; font-size: 14px;">[注意].不要问我为什么知道这样配置的,你init一个项目就知道了…根据本地最新的依赖版本信息复制进去就可以啦

5.3.然后在项目根目录下面执行npm install安装依赖模块,安装记录截图如下:

如果这样觉的嫌麻烦了,当然了还记得上面如果你重新init一个项目,直接把node_modules文件夹复制进行呗

5.4.curl -o .flowconfighttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

做一下flow配置

5.5.到这里其实已经差不多了,不过我们看上面的build.gradle文件中的配置compile 'com.facebook.react:react-native:+' 如果直接这样的话,官方会去下载已经提交到0.20.1版本,所以我们这边还是需要做一些配置,让它可以加载我们node_modules文件夹中react-native本地最新版本库。具体修改文件路径:android/build.gradle

9
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS,Obj-C sources,Android binaries) is installed from npm
url "$projectDir/../../node_modules/react-native/android"
}
}
新增maven库地址到本地库即可

5.6.现在我们创建一下文件命名为:index.android.js,然后在里边添加如下代码:

19
20
21
22
23
24
25
26
27
28
29
30
'use strict'
;
import React from 'react' ;
{
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native' ;
MyAwesomeApp React.Component {
render() {
(
<View >
<Text style={styles.hello}>Hello,World</Text>
<Text style={styles.hello}>恭喜你已经完成React Native移植Android项目</Text>
<Text style={styles.hello}>博客地址:www.lcode.org</Text>
</View>
)
}
}
var styles = StyleSheet.create({
hello: {
fontSize: 20 ,
textAlign: 'center' margin: 10 },
});

猜你在找的React相关文章