Android开发 React Native项目创建及环境搭建
来源:互联网 发布:大数据时代财务转型 编辑:程序博客网 时间:2024/06/13 16:50
先来看一下RNDemo效果吧,这里不得不吐槽一下,说实话RN毕竟属于js性能没有原生流畅看一下效果就知道了:
首先你需要安装NodeJS,因为React Native(简称RN,后面我就都用RN称呼了)本身就是使用Javascript语言和React语言为基础的,后面你会发现所有文件都是以.js为后缀名的,所以需要NodeJS来编译文件,而且后面会介绍到,我们还需要使用Node命令来初始化RN项目以及下载所有需要的node_modules包,好了废话不多说咱们开始吧。
如果安装完了NodeJS,你就可以使用npm命令了,否则找不到该命令,我先来介绍如何在Android Studio使用RN。
1、使用Android Studio创建一个空项目例如"RNDemo",不过创建Android项目的时候需要注意的是:Minimum SDK当前最低兼 容支持API16,所以创建的时候最好mini API16以上。
2、Android Demo项目创建完成之后,点击Terminal(注意需要在根目录下执行)
接下来执行下面代码:
npm init
npm install --save react react-native
注意:
init 主要根据提醒生成package.json文件
install --save react react-native 安装React 和React Native
然后在浏览器打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
将该文件下载下来放到根目录下:
3、添加及修改配置内容
1.修改package.json文件
2.创建入口js文件
3.添加build文件配置
build.gradle(Module:app)添加:
defaultConfig { ... ndk { abiFilters "armeabi-v7a", "x86" } }
android { ... configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:+' }}
compile "com.facebook.react:react-native:+"
build.gradle(Project:Application)添加:
allprojects { repositories { jcenter() maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android" } }}
4.manifest文件配置:
5.Activity继承ReactActivity,Application实现ReactApplication
把MyApplication添加到manifest的name中去。
一切已经准备就绪,开始run 'App',然后在Terminal中输入命令react-native start,注意(如果是真机需要在这之前先执行adb reverse tcp:8081 tcp:8081保证8081端口与真机连接请不要占用端口号)
如果你需要打包App,那么首先你需要在android/app/src/main下新建assets目录,然后在Terminal命令行输入:
然后你会发现在你创建的assets目录下会产生两个bundle文件就可以打包啦: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/
4、最后介绍RN如何编程
首先你需要了解一下react语言以及JavaScript语言基础,然后最好安装Webstorm,其他软件也能用但是,目前Webstorm是最流行以及最好用的,所有基本操作类似AndroidStudio开发工具用起来更顺手推荐Webstorm,而且Webstorm可以直接创建React Native项目项目自动创建了Android和IOS项目可直接使用哦:
源码
- Android开发 React Native项目创建及环境搭建
- React-Native搭建开发环境-Android-Windows
- 搭建React Native Android开发环境[Windows]
- 搭建React Native Android开发环境
- 搭建 React Native 开发环境
- 搭建React Native开发环境
- React Native 搭建开发环境
- React Native开发环境搭建
- 搭建React Native开发环境
- React-Native开发环境搭建
- React Native搭建开发环境
- React Native 开发环境搭建
- React Native 搭建开发环境
- react Native搭建开发环境
- React Native搭建开发环境
- React Native搭建开发环境
- react-native开发环境搭建
- react native开发环境搭建
- 嵌入式Ubuntu 搭建caffee环境
- caffe-windows所需libraries_v120_x64_py27_1.1.0.tar.bz2下载
- sql 左连接,右连接,等值连接,case-when
- VS2017单元测试列表中获取不到单元测试的异常
- ubuntu14设置在当前目录打开终端
- Android开发 React Native项目创建及环境搭建
- 在Mac上搭建SylixOS开发环境
- HDU
- git和svn的区别
- Android对话框
- angulajs简单增删改查2
- eclipse中怎么修改所复制的web项目的部署名字
- 最新版Ubuntu 17.10与Windows双系统安装、配置与美化教程(转载)
- angularJs球员信息表