AS 混合RN编译运行最新基础教程-CSDN博客

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

环境搭建

创建原生工程或直接使用已有工程（注意：minSdkVersion >=16）
下载安装 Python 后在系统变量path后拼接 “；安装路径”即可 cmd命令: python --version验证是否成功
下载安装 node.js 后在系统变量path后拼接 “ ；安装路径”即可 cmd命令: node -v 验证是否成功
下载安装 curl 找到对应自己电脑系统的版本下载解压curl.exe程序到C:\Windows\System32目录下即可.

cmd运行结果如下：

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即可

{
  "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的库下面是正在安装，需要等待一段时间

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

复制代码

安装完成后如图

3.curl -o .flowconfig raw.githubusercontent.com/facebook/re… 用于下载.flowconfig文件

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

{
  "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”

'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**

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

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 添加权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
复制代码

代码配置

1.修改Application

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

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 app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
复制代码

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

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

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

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

※报错的话试试clean / rebuild

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

※感谢阅读.