在这一系列的第二篇当中，我们创建了一个项目。以下内容根据以我上次创建的为例。 在终端 cd text,进入上次创建的项目，然后启动模拟器，我这里是genymotion模拟器，5.0版本。react-native run-android，等待片刻，就讲text这个app安装到模拟器上了。这个过程可能会出现个错误。什么错误呢，见下图：
这里说的很明显了，没找到SDK，我们重新配置下环境变量(我也不知道怎么回事，上次命名配置好的 ) 终端输入:export ANDROID_HOME=”SDK路径”,回车即可。好了，现在我们成功部署好了。
接下来我们看看text中有哪些东西。见下图：
这里我们会发现andorid目录下和我们用AS创建是一样的，唯一不一样的地方时什么呢？很好，细心的你们已经看见了，没有layout。奇怪么？不奇怪，前几篇说过了，React.js就是充当V层的，而android中的v层不就是布局么？
接着，我们看下index.android.js文件，由于这个文件我把文字该了下，和最原始的有一点差别，不过没关系。
/** * Sample React Native App * https://github.com/facebook/react-native */
'use strict';
var React = require('react-native');
var {
AppRegistry,StyleSheet,Text,View,} = React;
var text = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
quanshijie
</Text>
<Text style={styles.instructions}>
yugyxy
</Text>Button,<Text style={styles.instructions}>
dianzilou603
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
fontSize: 20,textAlign: 'center',margin: 10,instructions: {
textAlign: 'center',color: '#333333',marginBottom: 5,});
AppRegistry.registerComponent('text',() => text);
这就是index.android.js啦，那么，他的显示结果是什么样的呢。见图：
那么我们现在来分析下index.android.js中的代码。
'use strict';
var React = require('react-native');
var {
AppRegistry,} = React;
这几串代码，第一二句应该是固定的，(我们打开上一篇中下载下来的文件中的js就是这个样子)，而剩下的东西应该就是声明布局中的东西了把。
- AppRegistry 这个应该是用来注册组件的
- StyleSheet css
- Text 相当于android中的TextView
- View 相当于android中的布局
var text = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
woshi quanshijie!
</Text>
<Text style={styles.instructions}>
tygyxy
</Text>
<Text style={styles.instructions}>
dianzilou603
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',welcome: {
fontSize: 20,textAlign: 'center',margin: 10,instructions: {
textAlign: 'center',color: '#333333',marginBottom: 5,});
上面这个就是视图树和样式了。简单直观。
AppRegistry.registerComponent('text',() => text);
从字面上就看的出，这个是注册text这个组件的。这里的text是var text那个text，别看错了。
看完了index.android.js，我们来看看MainActivity和我们以前的有啥子不同
package com.text;
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 com.facebook.soloader.SoLoader;
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@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,"text",null);
setContentView(mReactRootView);
}
@Override
public boolean onKeyUp(int keyCode,KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode,event);
}
@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);
}
}
}
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,null);
setContentView(mReactRootView);
在 Android 中， 默认情况下,由 Gradle 建立发布的开发者菜单将被禁用(例如， Gralde 的 assembleRelease 任务)。 虽然这种行为可以通过传递给 ReactInstanceManager#setUseDeveloperSupport 正确的值来自定义。这里的ReactInstanceManager就是开发者菜单相关的一些东西。
setJSMainModuleName("index.android")
这行代码将index.andorid.js加载进来，最后便成了我们看到的界面。
最后瞟一眼配置文件
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.text">
<uses-permission android:name="android.permission.INTERNET" />
<application android:allowBackup="true" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:theme="@style/AppTheme">
<activity android:name=".MainActivity" android:label="@string/app_name">
<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" />
</application>
</manifest>
哈哈，多出来个
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
这个我猜测是我们win+m出来的那个玩意。
等等，我们貌似忘记了一个东西
<uses-permission android:name="android.permission.INTERNET" />
配置文件里为什么会有这个玩意呢？以为我们再react-native run-android的时候，开了一个8081的端口，我们看看这个终端在干啥。见图：
看出来了，原来在这里进行翻译。翻译啥呢。我想应该将JSX翻译成JS吧。
好，今天就到这里了，有什么不对的，欢迎指出。
改错：上次那个多出来的activity，并不是那个菜单项，而是菜单项中点击dev setting出来的一个activity，上图。
，调试的话把我勾选上那项勾选上，调试极其方便，试试吧！
