React-Native-Android-Studio整合开发+环境配置+官方实例
linux下React Native开发环境搭建,使用Android-studio工具进行React Native整合开发。
参考React Native的官方文档,通过图文详细记录开发过程。可以查看本文档中涉及Github源码。
步骤1,2,3来配置React Native开发环境步骤4,5做react-native与Android运行demo整合开发。
1.安装Nodejs
1.1.下载最新版nodejs
1.2.配置环境变量
1.2.1.编辑node-v7.2.sh文件,可以查看本文档中涉及Github源码 。
xiaolei@wang:~$ sudo vim /etc/profile.d/node-v7.2.sh
1.2.2.写入如下内容
#!/bin/sh
# Author:wangxiaolei 王小雷
# Blog:http://blog.csdn.net/dream_an
# Github:https://github.com/wxiaolei
# Date:20161221
# Path:/etc/profile.d/node-v7.2.sh
export NODE_HOME=/opt/node-v7.2
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules
1.2.3.使得环境变量生效
xiaolei@wang:~$ source /etc/profile
1.3.查看
xiaolei@wang:~$ node -v
2.安装/配置Android-studio开发工具
2.1.下载Android-studio,解压,进入解压文件,运行./bin/studio.sh
即可完成安装(一切默认即可)。
2.2.下载必备的Android组件
- Android SDK
- Android SDK Platform
- Android Virtual Device
可以通过Android SDK Manager下载需要的版本(React默认的buildtool版本23.0.1())
查看:AwesomeProject/android/app/build.gradle文件内容如下
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
....
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
2.3.配置Android-studio环境变量。
2.3.1.新建一个android.sh环境变量脚本
xiaolei@wang:~$ sudo vim /etc/profile.d/android.sh
2.3.2.写入如下内容:
注意将export ANDROID_HOME=/home/xiaolei/Android/Sdk
中的 xiaolei 替换成自己的。
#!/bin/sh
# Author:wangxiaolei 王小雷
# Blog:http://blog.csdn.net/dream_an
# Github:https://github.com/wxiaolei
# Date:20161221
# Path:/etc/profile.d/android.sh
export ANDROID_HOME=/home/xiaolei/Android/Sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
2.3.3.使得环境变量生效
xiaolei@wang:~$ source /etc/profile
2.4.打开Android的模拟器,可以通过命令行或者在Android-studio中的工具栏中打开。
2.4.1.方法1:在终端输入android avd即可开启avd(Android Virtual Device(AVD)Manager),也证明了“b.配置Android-studio环境变量。”配置正确。
android avd
如果命令无效,可以重启,使得环境变量彻底生效
2.4.2.方法2:在Android-studio中的工具栏中打开
3.安装React Native
3.1.通过npm安装React Native
xiaolei@wang:~$ npm install -g react-native-cli
3.2.查看
xiaolei@wang:~$ react-native
4.创建一个官方React Native Demo AwesomeProject并导入到Android-studio中
4.1.使用react-native init 命令创建项目
单独创建一个React-native-demo 文件夹,并进入。
xiaolei@wang:~$ mkdir -p codehub/react-native &&cd codehub/react-native
创建/初始化React Native项目
xiaolei@wang:~/codehub/react-native$ react-native init AwesomeProject
文件结构如下:
4.2. 完成后,进入AwesomeProject文件夹开启react-native 服务,不要关闭,重要,如果不开启服务会出红屏问题(Could not get VatchedBridge…)
xiaolei@wang:~/codehub/react-native/AwesomeProject$ react-native start
4.3.打开Android-studio,导入刚才创建的Android的文件夹
xiaolei@wang:~$
4.3.1.导入Android文件夹下的内容,通过build.gradle
4.3.2.点击更新,等待完成
4.3.3.完成导入
5.在Android studio或者命令行中启动/调试,进行整合开发
5.1.点击工具栏的运行,弹出创建AVD选择框,如果已经有创建过则直接使用,否则按照默认创建即可。
5.2.至此,完成demo运行,可以查看本文档中涉及Github源码。如果修改app内容,可以修改AwesomeProject/index.android.js内容(也可以真机调试,亲测成功!)
如果出现红屏或者错误,检查是否在 AwesomeProject中开启了react-native start ,然后RR(在设备中重载)
React-Native-Android-Studio整合开发+环境配置+官方实例的更多相关文章
- Google Android Studio Kotlin 开发环境配置
Google 近日开发者大会宣布Kotlin成为Android开发的第一级语言,即Android官方开发语言,可见Google对Kotlin的重视,本文就介绍一下Android Studio下的Kot ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- 安装Nginx+Lua+OpenResty开发环境配置全过程实例
安装Nginx+Lua+OpenResty开发环境配置全过程实例 OpenResty由Nginx核心加很多第三方模块组成,默认集成了Lua开发环境,使得Nginx可以作为一个Web Server使用. ...
- Visual studio 通用开发环境配置:SDL,FFMPEG为例
引言 每一个C++库的使用都是从开发环境的配置开始的,其实每个库的配置过程都是大同小异,总结下来有下面几个步骤: 下载库文件,这里假定是已经预先编译完成的. 配置库文件的包含目录(include)和库 ...
- Android+NDK+OpenGLES开发环境配置
1.资源 (1).Android的eclipse开发环境 我用adt-bundle-windows-x86.官方主页就能下载.这是一个打包的版本号,直接执行eclipse.exe你可以开始 (2).N ...
- React Native - 1 Windows下的环境配置(Windows+Android)
参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ) 网站上建议使用Chocolatey去配环境, ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- Eclipse下Android的NDK开发环境配置
编辑2016年7月26日——增加了下载网址,修改了一些错误. 摸索了一周,走了很多弯路,磕磕绊绊,总算是弄好了NDK的开发环境,在这里总结一下吧. 一.Android NDK开发环境 首先下载安装JR ...
- android studio win7开发环境
java 开发环境 这里使用jdk1.7版本,从官网上下载. 点击.正常的window软件的安装方式,一直下一步即可. 环境变量的设置: 在系统属性中,对需要的环境变量进行设置: JAVA_HOME设 ...
随机推荐
- WebDriver高级应用实例(9)
9.1封装操作表格的公用类 目的:能够使自己编写操作表格的公用类,并基于公用类进行表格中的元素的各类操作 被测网页的网址的HTML代码: <html> <body> <t ...
- 【disruptor】1、关于disruptor中的SequenceBarrier对象
首先这个类的uml结构在disruptor中是这样的,里面只有部分的属性对象和函数内容,具体有什么作用,用到了再说,用不到我也不会... 1.那么这个对象有什么用呢? 注意我们这个类中有哪些属性: 我 ...
- 【杂谈】Java I/O的底层实现
前言 Java I/O功能封装的很好,使用起来很方便,就是刚开始学的时候,如果不了解装饰器模式,会被他繁多的类给吓到.用多了也就习惯了,而且现在有很多实用的封装良好的实用类,可直接读写整个文件.开发者 ...
- 文档对象模型DOM(二)
练习: 要求:界面上有个登录按钮,点击登录的时候,界面中弹出一个登录的方框,点击登录方框中的×的,登录方框消失. <!DOCTYPE html> <html> <head ...
- 导入maven项目遇到中文乱码
windows->preferences->content types->word Document 并输入utf-8->update; 右键选中的项目,选择propertie ...
- 【转载】Layered Window(分层窗体,透明窗体)
本文转载自花间醉卧<Layered Window(分层窗体,透明窗体)> //为窗体添加WS_EX_LAYERED属性,该属性使窗体支持透明 ModifyStyleEx(0, WS_EX_ ...
- 使用jQuery的$.ajax()向MVC控制器Post数据
一整天不是在看书,就是做练习.今天还是把最难实现的怎样使用jQuery的$.ajax()向MVC控制器Post数据分享. 创建一个添加数据的存储过程: 在MVC应用程序下的Entities目录下,修改 ...
- C#基础知识回顾--委托事件
在上一篇看到他我一下子就悟了(续)---委托,被人狂喷.说写的太空,没有什么内容之类的.所以准备在这里重写下,不过还是按着以前的方式尽量简单的写.这里我们以打篮球为例. 第一步:首先,其他对象订购事件 ...
- node.js遇到的问题
1.cann't find module 'request' 不能找到’request' 模块 解决方法:找到项目的根路径,cd到该路径,运行命令 npm install request 2.no ...
- 在WPF中实现平滑滚动
WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果.在滚动的时候添加过渡动画能给我们的软件增色不少,例如Office 2013的滚动 ...