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

时间: 2024-09-16 15:41:05

React-Native-Android-Studio整合开发+环境配置+官方实例的相关文章

《Cocos2D-x权威指南》——2.2 Android下的开发环境配置

2.2 Android下的开发环境配置 Android本意是"机器人",是Google公司推出的开源手机操作系统.Android基于Linux操作系统,由操作系统.中间件.用户界面和应用软件组成,号称首个为移动终端打造的真正开放和完整的移动软件. 在Android最早发布时,Google公司官方将Java语言作为第三方应用的开发语言,但是也没有完全拒绝C语言的开发人员使用自己的语言进行开发,因为在Android发布初期,Google就表明其虚拟机支持JNI(Java Native In

intellij idea-Intellij IDEA15 android git gradle开发环境配置

问题描述 Intellij IDEA15 android git gradle开发环境配置 解决方案 新手搞不懂这些都是啥,求助 解决方案二: 首先.idea配置挺烦的.开发配置百度有百科教程.你搜一下就有了

《Android的设计与实现:卷I》——第1章 1.6 NDK开发环境配置

1.6 NDK开发环境配置 Google官方对NDK(Native Development Kit,原生开发工具集)的解释如下: The Android NDK is a set of tools that allows Android application developers to embed native machine code compiled from C and/or C++ source files into their application packages. 可见,NDK

Android应用开发(一):Android平台搭建与开发环境配置

本文从自身经历的角度分享了Android应用开发的第一步,即Android平台搭建与开发环境配置,主要包括平台的选择与安装及其安装过程中经常遇到的问题,最后给出一个实例,即第一个Android软件"Hello World!". 1.Android Studio软件下载 可以在百度上直接下载Android Studio,或者到官网www.android.com上直接下载(中国大陆资源可能会受限). 注意:这里推荐使用Android Studio,并不推荐使用Eclipse或者IDEA开发

PHP 开发环境配置(Zend Studio)_php技巧

开发环境配置(Zend Studio)_php技巧-zend studio环境配置">   安装完成后运行程序 在Help菜单中有Register选项进行注册. 提供注册码如下: Username: zendstudio.netSerial Number: 3727234F6095F72034F6095F

Android Studio NDK开发同时加载多个SO文件时该如何配置

问题描述 Android Studio NDK开发同时加载多个SO文件时该如何配置 使用AS学习NDK开发时,当DEMO中只用到一个SO文件,开发.调试均正常. AS在开发NDK时是不需要手动编写Android.mk和Application.mk的,而通过配置build.gradle文件,可以自动在build目录下生成Android.mk,但是在配置build.gradle文件时,发现在ndk{...}中,只能配置一个moduleName,而这个moduleName正是编译后生成的SO文件名,请

visual studio-lucene.net3.0.3开发环境配置 Visual Studio 10.0

问题描述 lucene.net3.0.3开发环境配置 Visual Studio 10.0 怎么配置lucene.net3.0.3的开发环境,使其在Visual Studio 10.0上可以运行.我现在只有lucene.net3.0.3的代码,不知道该怎么用. 解决方案 你的代码里面有没有包含相应的包或者dll文件?如果没有,使用Install-Package Lucene.Net下载Lucene.Net 3.0.3包.

《Android应用开发与系统改造实战》——1.4节Android SDK开发环境配置

1.4 Android SDK开发环境配置Android应用开发与系统改造实战 1.4.1 安装已下载的软件(1)建立一个开发环境的文件夹,例如D:/delvelop文件夹. (2)解压Eclipse到一个delvelop文件夹下. (3)解压ADT到develop文件夹下. (4)解压SDK到develop文件夹下. 1.4.2 本地安装ADT(1)打开Eclipse应用程序. (2)然后进入Help→Install New Software项,如图1.17所示. 点击"Install New

React Native Android 应用内存使用探究

本文讲的是React Native Android 应用内存使用探究, 为什么我那台老旧的 Android 手机无法加载图片? 刚开始接触 React Native 应用时,我发现有个现象很奇怪,在 Android 手机上我无法看到任何图片,只有颜色和文字可以显示.但 iOS 手机却没有任何问题. 我以为是我新找来测试 React Native 工程的 Android 手机有问题.我甚至被这错误的想法牵着刷了 rom (基于 AOSP 5.1.1 的系统)来在更高的 Android 版本上运行