React Native系列之-第一个app

在这一系列的第二篇当中，我们创建了一个项目。以下内容根据以我上次创建的为例。
    在终端 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);
        }
    }
}

核心代码就在onCreate方法中

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，上图。
，调试的话把我勾选上那项勾选上，调试极其方便，试试吧！

React Native系列之-第一个app

相关推荐