［React-native］第一行代码Helloworld及集成已有项目的方案

一、参考官方文档点击打开链接写了第一个文档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 (
        Hello world!
      );
  }
}
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

参考文档1点击打开链接

参考文档2点击打开链接

一）进入已有项目根目录执行下述命令：

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 (
        Hello world!
      );
  }
}
AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);

在app的build.gradle添加依赖：(放弃低于34的版本吧，写activity用新版本超级轻松)

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

PS：一开始提示这个错误（应该大部分人不会遇到，but还是写一下）

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.:
(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添加网络权限：

六、添加原生代码：

（此处就不要参考官方的代码了，实在是太长了，用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 getPackages() {
      return Arrays.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如下：

五、模拟器效果如下：

六、真机运行效果

问题：真机屏幕显示一块白屏。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"

成功效果如下：

动画效果图如下：