［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 (        <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

参考文档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 (        <Text>Hello world!</Text>      );  }}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.0Disable 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"

成功效果如下：

动画效果图如下：