本文旨在指导React Native初学者如何使用React Native初步构建Android应用。在看本文之前，你应该具备了理解React Native的基本概念，以及搭建好了所需的环境（如果没有，参考官方网站）。接下来，我们一起来实现一个简单的PushDemoApp，借助jpush-android-sdk就可以实现推送功能。这里是PushDemoApp的源码。
我们先来看一下PushDemoApp最终的界面效果：
怎么样，是不是很心动呢，接下来我们来看看如何一步步打造一个React Native应用吧。首先创建一个Project，在命令行中输入
react-native init PushDemo
这样就创建了一个名为PushDemo的项目，使用Android Studio打开PushDemo/android项目，接下来改造android的工程结构以兼容Eclipse，如图所示：
并且在build.gradle加上相关配置，此处不再赘述，可以参考github上的源码。
配置入口
React Native应用有Native和JS两个入口：MainActivity以及index.android.js。
Native入口
Android的入口是在MainActivity中实例化ReactInstanceManager，并通过ReactRootView启动App。
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication((Application) PushDemoApplication.getContext())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("react-native-android/index.android")
.addPackage(new MainReactPackage())
.addPackage(new CustomReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager,"PushDemoApp",null);
上面的setBundleAssetName("index.android.bundle")，如果没有生成index.android.bundle文件，可以在app目录下新建一个assets文件夹，然后在命令行中启动packager（使用npm start命令即可），启动后再输入以下命令生成bundle文件：
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/assets/index.android.bundle"
上面-o后面的路径即为存放index.android.bundle的路径，当然你也可以修改这个路径。
setJSMainModuleName("")这一句里面的参数则是index.android.js所在的文件路径，这个路径是相对于package.json的路径，在本例中则把index.android.js放在了react-native-android目录下。
JS入口
打开index.android.js文件（推荐使用Sublime Text开发JS，有丰富的插件支持），可以看到最下面调用了AppReistry来注册JS入口：
React.AppRegistry.registerComponent('PushDemoApp', () => PushDemoApp);
要注意上面函数的第一个参数即为在MainActivity中mReactRootView.startReactApplication()方法中的第二个参数。
编写JS
配置好入口后，接下来我们就可以开始编写JS了。我们从index.android.js文件开始讲解相关语法以及布局。首先看到第一句： ‘use strict’;放在第一行表明整个脚本都使用了JS的严格模式，只需要记住开发的时候一般都使用严格模式就行了。
import React from 'react-native';
import PushActivity from './push_activity';
import SetActivity from './set_activity';
import WebActivity from './web_activity';
import from这是ES6的语法，关于React Native的代码规范，推荐参考这个。本例所使用的都是ES6语法。from后面是所需文件的相对路径，和ES5中的require类似，可以参考这个
var {
BackAndroid,
Component,
Text,
TextInput,
View,
Navigator,
} = React;
上面的代码声明了React的一些组件，下面就可以直接使用了。
constructor(props) {
super(props);
this.state = {
tag: '',
appKey: 'abc',
}
this.renderScene = this.renderScene.bind(this);
}
这个构造函数可以用来做一些初始化的动作，使用this.state = {}替代了ES5中getInitialState函数。React Native较为出彩的一点就是将所有的组件都看成了状态机，通过设置组件的状态或者属性就可以触发render函数重新渲染，实现刷新界面的效果。
<Text style = { styles.btnText }
{ this.state.appKey }
</Text>
上面Text相当于Android中的TextView控件，Text控件包裹的内容引用了一个状态：appKey，appKey在构造函数中被初始化为abc，那么这个Text就会显示abc这个字符串。使用this.setState方法就可以改变状态，比如：
this.setState({ appKey: '123' });
这样Text就会刷新，重新显示为123。还可以将状态作为属性传递给其他组件，比如：
<Actionbar style = { styles.actionbar }>
onselect = { this.onSelectMenu }
currentPage = { this.state.page }
</Actionbar>
上面的代码将this.onSelectMenu以及this.state.page作为属性传递到Actionbar这个组件了，前者是一个函数，后者是一个状态，这样在Actionbar中就可以通过this.props.onselect以及this.props.currentPage来获得这两个属性。当这两个属性变化时，也会触发render函数重新渲染。在Redux架构中，通过改变属性来刷新界面非常常见，后面会讲到这个架构。
接下来是这一句
this.renderScene = this.renderScene.bind(this);
在ES5下，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用。关于ES5与ES6的写法对照可以参考这个。
接下来先看到componentDidMount()和componentWillUnmount()这两个函数，这两个是组件的生命周期函数，在组件进入生命周期的不同阶段时自动调用。关于组件生命周期的介绍可以参考这篇博客。在componentDidMount()声明了点击Android的返回键时从navigator的栈中弹出一个页面，类似于Android中的onBackPress()方法。
接下来是render()函数，这个函数就是绘制界面的地方。React Native可以用Html或JSX来编写界面，推荐使用官方推荐的JSX语法。
render() {
return (
<Navigator
initialRoute = { {name: 'pushActivity' }}
configureScene = { this.configureScene }
renderScene = { this.renderScene } />
);
}
可以看到这里仅仅是返回了一个Navigator。
Navigator
React Native使用Navigator来控制页面的跳转。Navigator有3个属性：
- initialRoute 声明了初始要显示的界面，这里是传了一个route name过去即“pushActivity”
- configureScene 指定了页面跳转的动画，查看Navigator.SceneConfigs来获取默认的动画和更多的场景配置选项。
- renderScene 声明了页面该如何跳转
renderScene(router, navigator) {
var Component = null;
this.navigator = navigator;
switch(router.name) {
case "pushActivity":
Component = PushActivity;
break;
case "setActivity":
Component = SetActivity;
break;
case "webActivity":
Component = WebActivity;
}
//将navigator作为属性传给其他页面，这样在其他页面中就可以使用this.props.navigator拿到navigator了
return <Component navigator = { navigator } />
}
renderScene()有两个参数，router对象指定要跳转的界面，router.name可以拿到刚才我们在initialRoute时传过来的name，此处仅仅将name传过来，然后根据name来返回Component，后面会看到其他写法。navigator可以作为属性传给其他页面，还可以带一些参数传到其他页面，相当于Android中的Intent。比如：
return <Component
navigator = { navigator }
params = {
name: '',
title: '',
}
/>
这样在其他页面可以通过this.props.name以及this.props.title来拿到这两个值，相当于getIntent()。关于页面的启动模式，即相当于Android中Activity的4种启动模式以及flag的设置，在React Native中则是在跳转时调用Navigator的内部方法来控制，如下：
- getCurrentRoutes() - returns the current list of routes, 返回当前栈中的所有路由
- jumpBack() - Jump backward without unmounting the current scene，在保留当前场景的情况下返回到上一个场景
- jumpForward() - Jump forward to the next scene in the route stack 回到刚才jumpBack()之前的场景
- jumpTo(route) - Transition to an existing scene without unmounting 跳转到当前栈中的某个场景并且不会卸载掉之前的场景
- push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to 往栈中push一个新场景
- pop() - Transition back and unmount the current scene 在栈中卸载掉当前场景，并返回上一个场景
- replace(route) - Replace the current scene with a new route 用一个新路由替换掉当前场景
- replaceAtIndex(route, index) - Replace a scene as specified by an index 替换指定索引的路由场景
- replacePrevious(route) - Replace the previous scene 替换掉上一个场景
- resetTo(route) - Navigate to a new scene and reset route stack 跳转到一个新场景，并且重置路由栈，相当于Android中的new Task
- immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes 用一个新路由栈替换之前的路由栈
- popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted 跳转到指定的场景，在这个场景之上的都会被卸载掉。相当于Android中的CLEAR_TOP标志
- popToTop() - Pop to the first scene in the stack, unmounting every other scene 跳转到第一个场景，其他的场景将会被卸载
布局
我们再来看一下push_activity.js这个类，这是应用的启动界面，先来看一下render()方法，render()中return的内容相当于Android中的xml布局，React Native使用了css-layout，实现了flexbox，Flexbox布局默认是线性布局即Android中的LinearLayout，PushActivity最外面由ScrollView包裹，style属性指定了该控件使用了哪种style，如果一个控件没有声明高度或宽度，则默认填充满父布局。使用StyleSheet.create来定义样式，可以看到样式定义所用的语法是JSON格式的：
var styles = React.StyleSheet.create({
container: {
flex: 1,
},
});
flex:1这个也相当于match_parent。需要注意的是，在React Native的样式中中，如果没有声明，数值的默认单位都是dp，而不是px，下面讲解布局相关的属性。
flexDirection:指定排列方向，有row, column这两个值，分别是水平及垂直排列，默认为垂直排列。
alignItems: 可能的取值:
- flex-start 控件在x轴的起点对齐；但在水平布局中为在y轴的起点对齐
- center 控件在x轴的中点对齐；在水平布局中为在y轴的中点对齐
- flex-end 控件在x轴的终点对齐；但在水平布局中为在y轴的终点对齐
- stretch 默认值，占满容器的高度；如果为水平方向则占满宽度。
justifyContent: 可能的取值:
- flex-start 在垂直布局中为上对齐（默认值）；在水平布局中为左对齐（默认值）
- center 居中
- flex-end 在垂直布局中为下对齐；在水平布局中为右对齐
- space-between 在垂直布局中以高为基准，控件两端对齐，控件之间的间隔相等；在水平布局中以宽为基准，控件两端对齐，控件之间间隔相等
-
space-around 在垂直布局中以高为基准，控件之间的间隔相等，控件与边界的间隔为控件之间间隔的一半；在水平布局中以宽为基准，控件之间的间隔相等，控件与边界的间隔为控件之间间隔的一半
alignSelf 其效果与alignItems一样，但针对个别控件。如果某个控件声明了alignSelf属性，则会覆盖父容器的alignItems属性。
position :可能的取值：
- relative 相对位置（默认值）
- absolute 绝对位置这两个属性一般会搭配left，top，right，bottom这4个属性来使用，分别表示控件的左上右下边缘距离y轴或x轴的距离。
还有一些属性是与控件相关的：
背景颜色
- backgroundColor //所有涉及颜色的都是字符串类型的rgb格式，如#ffffff
边框
- borderBottomWidth //底部边框宽度
- borderLeftWidth //左边边框宽度
- borderRightWidth //右边边框宽度
- borderTopWidth //顶部边框宽度
- borderWidth //所有边框宽度
- borderTopLeftRadius //左上圆角
- borderTopRightRadius //右上圆角
- borderBottomLeftRadius //左下圆角
- borderBottomRightRadius //右下圆角
- borderRadius //圆角
- borderBottomColor //底边框颜色
- borderLeftColor //左边框颜色
- borderRightColor //右边框颜色
- borderTopColor //上边框颜色
- borderColor //边框颜色
外边距
- marginBottom
- marginLeft
- marginRight
- marginTop
- marginVertical
- marginHorizontal
- margin
内边距
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- paddingVerticalpaddingHorizontal
- padding
宽高
- width
- height
字体相关
- color 字体颜色
- fontFamily 字体族
- fontSize 字体大小
- fontStyle 字体样式，正常，倾斜等，值为enum('normal', 'italic')
- fontWeight 字体粗细，值为enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
- letterSpacing 字符间隔
- lineHeight 行高
- textAlign 字体对齐方式，值为enum("auto", 'left', 'right', 'center', 'justify')
- textDecorationLine 字体修饰，上划线，下划线，删除线，无修饰，值为enum("none", 'underline', 'line-through', 'underline underline-through')
- textDecorationStyle enum("solid", 'double', 'dotted', 'dashed') 修饰的线的类型
- textDecorationColor 修饰的线的颜色
- writingDirection enum("auto", 'ltr', 'rtl') 字体显示方向
图片相关
- resizeMode enum('cover', 'contain', 'stretch') conver是指按照图片实际大小显示，超出部分裁剪，默认值；contain是无论如何都将图片显示在控件中，如果超出则等比例缩小并居中显示；stretch是指将图片进行拉伸，填充满控件
- overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
- tintColor 着色，rgb字符串类型
- opacity 透明度
在render()中，使用JSX的写法，用一对<View></View>标签来包裹一个控件，这相当于Html中的<div></div>标签。下面给出一些React Native与Android控件对照：
| React Native | Android |
|---|---|
| Text | TextView |
| TouchableHighlight | Button |
| TextInput | EditText |
| image | ImageView |
| ScrollView | ScrollView |
| ListView | ListView |
React Native还实现了一些比较常用的控件，如Switch、Picker、ToolbarAndroid、ViewPagerAndroid等。这些控件就不再一一讲解了，有很多文章可以参考，官网也有demo
JS调用Native
下面来讲解一下JS如何调用Native。如果我们的应用是混合的React Native应用(使用了第三方jar，如本例中的jpush-sdk)，那么在JS中调用sdk中的接口是非常常见而且也是必要的。使用NativeModule就可以达到这种目的。要声明一个NativeModule，需要以下几个步骤。
- 定义一个NativeModule类，继承自ReactContextBaseJavaModule。
public class PushHelperModule extends ReactContextBaseJavaModule {
private static String TAG = "PushHelperModule";
private Context mContext;
public PushHelperModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public boolean canOverrideExistingModule() {
return true;
}
@Override
public String getName() {
return "PushHelper";
}
}
声明一个NativeModule类时，需要重写canOverrideExistingModule()及getName()两个方法，在getName中返回的字符串即为在JS中引用的类，即在JS中使用PushHelper来引用PushHelperModule这个类。现在可以在PushHelperModule中添加ReactMethod了：
@ReactMethod
public void init(Callback successCallback, Callback errorCallback) {
try {
JPushInterface.init(PushDemoApplication.getContext());
successCallback.invoke("init Success!");
Log.i("PushSDK", "init Success !");
} catch (Exception e) {
errorCallback.invoke(e.getMessage());
}
}
使用@ReactMethod标签来表明这是一个React方法，这样就可以在JS中直接调用，而且这个方法必须为public，返回类型为void。上面的方法还使用了Callback（com.facebook.react.bridge.Callback），CallBack可以用来在Native中回调JS中的方法。结合本例，init方法中调用了JPushInterface.init(context)这个接口，接着执行了callback.invoike()，这个方法就可以回调到JS了.invoke()可以带参数，String或者Map都行。可以有多个Callback，相应地在JS中要带多个参数。
push_activity.js
onInitPress() {
PushHelper.init( (success) => {
ToastAndroid.show(success, ToastAndroid.SHORT);
}, (error) => {
ToastAndroid.show(error, ToastAndroid.SHORT);
});
}
在JS中使用() => {}箭头函数就可以接收回调函数了。
- 新建一个类实现ReactPackger，然后在将刚才定义的NativeModule加进来：
public class CustomReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> result = new ArrayList<>();
result.add(new PushHelperModule(reactContext));
result.add(new ToastModule(reactContext));
result.add(new JSHelperModule(reactContext));
return result;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
List<ViewManager> result = new ArrayList<>();
result.add(new ReactTextManager());
return result;
}
}
在重写的createNativeModules()方法中将PushHeperModule加到List，然后返回这个List就行了。其他的模块如果为空可以返回Collections.emptyList()。
- 在MainActivity中将packger加到ReactInstanceManager的构造方法中
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication((Application) PushDemoApplication.getContext())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("react-native-android/index.android")
.addPackage(new MainReactPackage())
.addPackage(new CustomReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "PushDemoApp", null);
- 在JS中用NativeModules引用
var {
NativeModules,
} = React;
var PushHelper = NativeModules.PushHelper;
之后就可以使用PushHelper直接调用使用了@ReactMethod标签的方法了。需要注意的是，如果在Native添加了新的类，必须重新编译运行一次App，只是Reload JS是不能刷新的。
Native调用JS
在Native中调用JS，最简单的方法是使用RCTDeviceEventEmitter。
打开MainActivity，在MessageReceiver的onReceive()中可以看到这段代码：
Assertions.assertNotNull(mReactInstanceManager.getCurrentReactContext())
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("receivePushMsg", messge);
通过getCurrentReactContext.getJSModule()方法找到RCTDeviceEventEmitter这个模块，然后调用emit方法调用JS中的方法，emit()方法的第一个参数即为在JS中定义的接收事件名，第二个参数可以传递一个对象到JS中。接下来在JS中接收这个事件：
push_activity.js
componentWillMount() {
DeviceEventEmitter.addListener('receivePushMsg', (data) => {
this.setState({ pushMsg: data });
});
}
在组件注册的生命周期函数中使用DeviceEventEmitter.addListener()来接收RCTDeviceEventEmitter的emit事件即可。然后在组件卸载的生命周期函数中移除Listener：
componentWillUnmount() {
DeviceEventEmitter.removeAllListeners();
}
运行
下面来说一下如何运行。
在init完Project后，就可以直接在命令行中使用
react-native run-android
命令运行了。这时会自动弹出一个窗口来执行React Packger。
如果使用模拟器，推荐使用Genymotion，只要注册一个账号就可以了。运行后如果出现
不要方，点击一下Reload JS即可，如果出现了Unable to download JS bundle错误：
首先检查一下设备和电脑的网络，确保两者在同一个Wifi环境下。在模拟器上点击下面的三角按钮，在弹出的菜单中点击Menu按钮，如图：
就可以唤出设置对话框：
在真机中，只需要晃动手机，即可弹出上面的对话框。然后点击Dev Settings选项进入设置界面。
然后点击Debug server host & port for device，在弹出的对话框中，输入电脑连接的IP地址加上8081端口即可，如：
192.168.1.1:8081
然后点击OK，返回，重新唤出设置对话框，点击Reload JS选项，这时应该可以正确运行了。
有问题可发我邮件：caiyaoguan@gmail.com。后续会发表ListView的用法以及在React Native中如何使用Redux架构。
网友评论