一、参考官方文档点击打开链接写了第一个文档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,()=>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.<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"
成功效果如下：
动画效果图如下：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。