AndroidStudio嵌入ReactNative混合开发环境搭建
来源:互联网 发布:sql拼接 引号 编辑:程序博客网 时间:2024/06/08 04:42
AndroidStudio: 2.3
Node: 8.9.1
Python: 2.7.12
react-native-cli: 2.0.1
react-native: 0.50.4
前提:已安装配置好Java SDK,搭建好Androidstudio开发环境,安装配置好Node、python
一、创建AndroidStudio项目
等待项目创建完成。
二、集成ReactNative
项目左边视图窗口选择Project,点击左下角的Terminal终端按钮:在终端窗口中执行:npm init,生成package.json文件
package name: (rnappdemo) 输入项目名称,全部小写:rnappdemo
version: (1.0.0) 输入版本号,可以直接回车,也可以输入自己想要的初始版本号
description 输入项目描述,随便输入:first reactnativeapp
entry point: (index.js)输入reactnative的入口文件:index.android.js
test command: 输入:no
git repository: 输入:no
keywords: 输入:no
author: 输入作者信息
license: (ISC) 输入许可 默认ISC
以上所以完成之后,最后输入yes确认 Is this ok? (yes) yes在终端窗口执行:npm install --save react react-native 安装React 和React Native
查看项目中多出了一个node_modules目录,说明react和react-native安装成功(react的版本为当前最新版16.1.1,react-native的版本为当前最新版0.50.4)
在项目根目录下新建一个名为.flowconfig的文件,将 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 网页的内容复制到.flowconfig文件中
三、配置reactnative相关内容
在项目根目录下添加index.android.js文件,文件格式设置为UTF-8(选中index.js文件,File->File Encoding->more,选中UTF-8)内容为:
'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>第一个混合RNAPP</Text> </View> ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
四、项目app模块build.gradle配置
在android->defaultConfig最后添加NDK支持:
ndk {
abiFilters "armeabi-v7a", "x86"
}
在android里面添加如下两个配置:
packagingOptions {
exclude "lib/arm64-v8a/librealm-jni.so"
}
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
在dependencies里面添加reactnative依赖:
compile "com.facebook.react:react-native:+"
完成后点击右上角的Sync now同步五、项目build.gradle配置
在allprojects->respositories中添加以下内容,加载最新的react-native库,然后点击右上角的Sync now同步maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
六、配置app模块AndroidManifest.xml文件
添加网络权限:
<uses-permissionandroid:name="android.permission.INTERNET" />
添加弹窗权限:
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
在application里添加reactnative弹窗内置页面activity,否则摇晃手机并打开开发者菜单后,点击Dev Setting,会直接Crash:
<activityandroid:name="com.facebook.react.devsupport.DevSettingsActivity"/>七、手动生成bundle文件
在app/src/main下新建assets目录,在终端窗口Terminal中执行:
react-native bundle --platform android --dev false--entry-file index.js --bundle-output app/src/main/assets/index.android.bundle--assets-dest app/src/main/res/
说明:
--platform:平台
--dev:开发模式
--entry-file:条目文件
--bundle-output:bundle文件生成的目录
--assets-dest:资源文件生成的目录
执行完成后,会在assets目录下生成两个文件:index.android.bundle、index.android.bundle.meta
八、添加Native Code
新建MyReactActivity,内容:
import android.support.annotation.Nullable;import com.facebook.react.ReactActivity;public class MyReactActivity extends ReactActivity { @Nullable @Override protected String getMainComponentName() { return "HelloWorld"; }}
GetMainComponentName()方法返回的"HelloWorld"是在index.js中AppRegistry.registerComponent('HelloWorld',() => HelloWorld);注册的HelloWorld模块(第一个参数'HelloWorld')
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 com.facebook.soloader.SoLoader;import java.util.Arrays;import java.util.List;public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = 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 mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this,false); }}
修改AndroidManifest.xml起始activity:
在application中添加android:name=".MainApplication";
将MainActivity改为MyReactActivity九、运行
修改index.android.js,将"第一个混合 RNAPP"修改为"第一个混合 RNAPP OK",摇一摇手机,点击Reload重新加载,看一看手机界面有没有跟着变化
- AndroidStudio嵌入ReactNative混合开发环境搭建
- ReactNative 开发环境搭建
- reactNative搭建开发环境
- 一步一步搭建ReactNative开发环境
- AndroidStudio开发环境搭建
- AndroidStudio开发环境搭建
- ReactNative开发(一)之开发环境搭建
- 如何搭建AndroidStudio开发环境
- Android 开发环境搭建(AndroidStudio)
- androidstudio集成开发环境搭建
- Windows10下搭建ReactNative开发环境
- 一步一步搭建ReactNative开发环境(Mac)
- ReactNative Windows Android开发环境搭建
- ReactNative开发环境搭建总结(windows mac)
- ReactNative在win下开发环境搭建
- Windows环境下Android的ReactNative开发环境搭建
- ReactNative 环境搭建
- MAC ReactNative环境搭建
- MyEclipse结合GitHub简单实用教程
- 一元谓词案例与二元谓词案例
- rollup,支持多种打包方式的前端利器
- @Controller和@RestController的区别?
- 新手安装Ubuntu 16.04 操作系统
- AndroidStudio嵌入ReactNative混合开发环境搭建
- ROC
- php编程文件上传代码
- HDOJ-1002 A + B Problem II 高精度(java)
- Roman to Integer
- C++primer习题第八章
- Ubuntu16.04 faster-rcnn+caffe+gpu运行环境配置以及解决各种bug
- 58. Length of Last Word
- 《程序员的自我修养--链接、装载与库》读书笔记 -- 写在开篇