由于马上入职一家混合开发的公司，之前一直是原生开发，所以不得不学了，百度google了很多，最后因为一个报错耗费了一下午，网上的教程大部分都是17年的，有些地方还是不清楚，接下来开始整理我亲自采坑的过程。

环境搭建

  • 创建原生工程或直接使用已有工程（注意：minSdkVersion >=16）

  • 下载安装 Python 后在系统变量path后拼接 “；安装路径”即可 cmd命令: python –version验证是否成功

  • 下载安装 node.js 后在系统变量path后拼接 “ ；安装路径”即可 cmd命令: node -v 验证是否成功

  • 下载安装 curl 找到对应自己电脑系统的版本下载 解压curl.exe程序到C:\Windows\System32目录下即可.

cmd运行结果如下：

1
2
3
4
5
6
7
8
9
10
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
C:\Users\Administrator>python --version
Python 3.6.5
C:\Users\Administrator>node -v
v8.10.0
C:\Users\Administrator>

工程配置

在AS Terminal中或cmd cd到工程的跟目下 依次执行以下命令：

1.npm init 用于生成package.json文件 按步骤一步一步回车 最后yes即可

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "reactnativedemo",
  "version": "1.0.0",
  "description": "reactnative",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.npm install –save react react-native 用于安装react native的库 下面是正在安装，需要等待一段时间

1
2
D:\ReactNativeDemo>npm install --save react react-native
[..................] | fetchMetadata: sill resolveWithNewModule isomorphic-fetch@2.2.1 checking installable status

安装完成后如图

react
react

3.react-native curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 用于下载.flowconfig文件

4.修改package.json 在scripts标签下添加 “start”: “node node_modules/react-native/local-cli/cli.js start” 

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "reactnativedemo",
  "version": "1.0.0",
  "description": "reactnative",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "",
  "license": "ISC"
}

5.添加index.android.js 文件到工程的根目录下，内容如下 仅显示一个文本“Hello, ReactNative”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'use strict';
 import React from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
   View
 } from 'react-native';
 class HelloReactNative extends React.Component {
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.hello}>Hello, ReactNative</Text>
       </View>
     )
   }
 }
 var styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
   },
   hello: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
 });
 AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

6.配置app下的build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
android {
    compileSdkVersion 23
    buildToolsVersion '25.0.0'
    defaultConfig {
        applicationId "com.example.administrator.viewdispachdemo"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    packagingOptions {
        exclude "lib/arm64-v8a"
    }
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile "com.android.support:design:23.0.1"
    compile 'com.android.support.constraint:constraint-layout:1.1.0'
    compile 'com.android.support:support-v4:23.0.1'
    compile 'com.android.support:recyclerview-v7:23.0.1'
    testCompile 'junit:junit:4.12'
    androidTestCompile 'com.android.support.test:runner:1.0.2'
    androidTestCompile 'com.android.support.test.espresso:espresso-core:3.0.2'
    androidTestCompile 'com.android.support:support-annotations:27.1.0'
    compile "com.facebook.react:react-native:0.55.4"//根据当时最新版本修改
}

7.配置project下的build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
buildscript {
    repositories {
        //google()
        jcenter()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        //classpath 'com.android.tools.build:gradle:3.1.0'
        classpath 'com.android.tools.build:gradle:2.3.0'
    }
}
allprojects {
    repositories {
        //google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

8.AndroidManifest.xml 添加权限

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

代码配置

1.修改Application 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class MyApplication extends Application implements ReactApplication {
    private final ReactNativeHost reactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
        @Override
        protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(new MainReactPackage());
        }
    };
    @Override
    public ReactNativeHost getReactNativeHost() {
        return reactNativeHost;
    }
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, false);
    }
}

2.添加/修改Activity

1
2
3
4
5
6
7
8
public class MyReactActivity extends ReactActivity{
    @Nullable
    @Override
    protected String getMainComponentName() {
        return "HelloReactNative";
    }
}

运行配置

1.执行npm start或react-native start （如果出现不是内部命令 npm install -g react-native-cli ）

2.app/src/main下创建assets 文件夹 再执行 命令：

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/

执行成功后会在该目录下生产两个文件 如图

1528818925956
1528818925956

3.如果是真机运行，执行adb reverse tcp:8081 tcp:8081

4.Android Studio 点击Run 运行工程（报错不要烦，确保前面每一步都是正确的，再百谷）.

1528818925956
1528818925956

※以上运行顺序不能反 否则会报错.

※报错的话试试clean / rebuild

※后面进行实际开发后再分享吧 这里只是前期的混合植入编译运行.

※感谢阅读.