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

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(在设备中重载)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

通过数据库中的表,使用 MyEclipse2017的反向生成工具-->hibernate反转引擎引擎(MyEclipse2017自带的插件) 来反转生成实体类和对应的映射文件

1、在MyEclipse中,Java视图下,新建一个普通的java project,新建该项目的目的是:用来接收反转引擎生成的实体类和对应的映射文件。

17620
来自专栏老马寒门IT

08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 ...

44270
来自专栏飞雪无情的博客

第一个Android应用,HelloWorld

这节主要内容是使用ADT创建一个Helloword实例,并进行概要分析,中间会有AVD的创建。

9230
来自专栏步履前行

xxl-job 源码分析系列(1)- 配置运行

  XXL-JOB是一个轻量级分布式任务调度平台,当然我司也在用,然后正巧自己想学一学源码分析,就挑正好在用的xxl-job了。

31120
来自专栏吴柯的运维笔记

Linux文件权限的更改:理解第一,命令次之

Linux文件权限的更改: -Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作。 -文件或目录的访问权...

24340
来自专栏肖洒的博客

Web(一):概述

学Python也有一段时间了,学完基本语法后整个人都蒙了。没有什么可以来练手,感觉什么也不会。 准备主攻爬虫和Web。 昨晚学长刚给讲了MVC,回来看到Pyt...

9420
来自专栏DevOps时代的专栏

占坑!利用 JenKins 持续集成 iOS 项目时遇到的问题

持续集成(Continuous Integration,简称CI)是一种软件开发实践:许多团队频繁地集成他们的工作,每位成员通常进行日常集成,进而每天会有多种集...

20120
来自专栏做全栈攻城狮

采用React+Ant Design组件化开发前端界面(一)

​ antd是基于less开发的,我们使用less可以方便的改变主题色等配置。

30730
来自专栏云计算教程系列

CentOS 7如何设置uWSGI和Nginx提供Python应用服务

在本指南中,我们将设置一个由uWSGI提供服务的简单WSGI应用程序。我们将使用Nginx Web服务器作为应用程序服务器的反向代理,以提供强大的连接处理。我们...

22840
来自专栏晓晨的专栏

Jenkins 集群搭建

Jenkins是当下比较流行的一款功能强大的持续集成工具,它支持搭建集群,来提高多项目的构建速度,模式为主从模式,master会将任务分配到各个从节点进行并发构...

33050

扫码关注云+社区

领取腾讯云代金券