一、參考官方文件點選開啟連結寫了第一個文件hello world

程式碼如下：

初始化一個專案HelloWorld，進入Helloworld資料夾，執行命令：

react-native init HelloWorld

得到資料夾中檔案：

修改index.android.js如下

import React,{Component} from 'react';
import {AppRegistry,Text} from 'react-native';
class HelloWorld extends Component{
  render(){
    return (
        <Text>Hello world!</Text>
      );
  }
}
AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);
 

二、開啟學習ES 6第一步：部署支援環境

一、nvm版本管理工具安裝點選開啟連結（nvm連結中包含安裝地址，可獲取最新版本）

1.控制檯直接輸入命令安裝：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

source ~/.nvm/nvm.sh

二、Node.js是JavaScript語言的伺服器執行環境，對ES6的支援度比瀏覽器更高。

$ nvm install node

PS:如何使用node.js執行js

例如新建一個app001.js

var tmp = new Date();
function f(){
	console.log(tmp);
}
f();

在控制檯執行及結果：

ebj1831:ES6 user$ node --harmony app001.js 
2016-11-01T08:56:12.241Z

三、在已有專案中引入react native

一）進入已有專案根目錄執行下述命令：

PS：共三行命令。究竟是什麼意思？

$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
 

第一條：npm init會引導你建立一個package.json檔案，包括名稱、版本、作者這些資訊等。

對於我們這些原生想做React native的人來說，確實不知道package.json是做什麼用的，各個引數用來做什麼。參考 package.json的各個欄位意思

當然，我們只是先引入一個helloworld可以不參考。直接去之前的demo裡面找到package.json複製過來就可以了！！！（拿來主義總規非正統做法，大家可一不可再）

第二條：npm install --save react react-native：安裝的同時，將資訊寫入package.json中

第三條：命令的作用。從https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig下載檔案並且檔名為.flowconfig。

二、開啟package.json的scripts中，新增這一行：

（當然，這個對於我們來說就不必要了，我們是複製的官方的demo的package.json，裡面已經有了）

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

三、從demo裡面把index.android.js複製到我們的專案的根目錄下面。

import React,{Component} from 'react';
import {AppRegistry,Text} from 'react-native';
class HelloWorld extends Component{
  render(){
    return (
        <Text>Hello world!</Text>
      );
  }
}
AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);

在app的build.gradle新增依賴：(放棄低於34的版本吧，寫activity用新版本超級輕鬆)

compile "com.facebook.react:react-native:+" // From node_modules.

Error:(30, 13) Failed to resolve: com.facebook.react:react-native:0.36.0
Disable offline mode and Sync

原因是預設設定裡面gradle是離線offline的緣故。解決如下：

四、在程式的(非當前module)build.gradle新增:

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

紅色預警，此處有坑：

一定要記得把$rootDir/../node_modules/react-native/android中間的..去掉，改成$rootDir/node_modules/react-native/android

PS：遇到一個錯誤：

tried to access method android.support.v4.net.ConnectivityManagerCompat.<init>:
(Lcom/facebook/react/bridge/ReactApplicationContext;)V from class com.facebook.react.modules.netinfo.NetInfoModule

原因：V7包衝突

把原有專案的v7包改成這個：

compile 'com.android.support:appcompat-v7:23.0.1'

當然對應的把這些也改成這樣為好：

compileSdkVersion 23
    buildToolsVersion '23.0.1'

    defaultConfig {
        applicationId "com.example.user.reactnativedemo"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }

五、AndroidManifest.xml新增網路許可權：

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

六、新增原生程式碼：

（此處就不要參考官方的程式碼了，實在是太長了，用react34之後新寫法吧）如下：

一）寫個application：

package com.example.user.reactnativedemo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

二）寫個activity如下：

package com.example.user.reactnativedemo;

import com.facebook.react.ReactActivity;

/**
 * Created by user on 16/11/2.
 */
public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }
}

三、主activity如下：（原生demo，主要用來跳轉到react-native頁面）

package com.example.user.reactnativedemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {
    Button bt1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bt1 = (Button) findViewById(R.id.bt1);
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,MyReactActivity.class));
            }
        });
    }
}

四、androidManifest如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.user.reactnativedemo">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:name=".MainApplication"
        android:supportsRtl="true"
        >
        <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=".MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
    </application>

</manifest>

五、模擬器效果如下：

六、真機執行效果

問題：真機螢幕顯示一塊白屏。As的logcat提示：

com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly

進入專案，在android/app/src/main下新建assets目錄，控制檯執行以下兩條命令

react-native start > /dev/null 2>&1 &

curl "http://localhost:8081/index.android.bundle?platform=android" -o "app/src/main/assets/index.android.bundle"

成功效果如下：