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.

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

这里写图片描述

目录
相关文章
|
10天前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
12天前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
57 15
|
3天前
|
前端开发 Android开发 iOS开发
探索安卓与iOS开发的差异性与互补性
在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统各据一方,引领着市场潮流。它们在技术架构、开发环境及用户群体等方面展现出独特的差异性,同时也存在着潜在的互补性。本文将深入剖析这两种平台的开发细节,从不同角度揭示其各自优势及相互之间的协同潜力,为开发者提供全面而深刻的视角。
10 2
|
10天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异性与互操作性
【7月更文挑战第17天】在移动应用开发的广阔天地中,安卓和iOS这两大操作系统如同双子星座般璀璨夺目。它们各自拥有独特的开发环境、编程语言和用户群体,为开发者提供了不同的挑战和机遇。本文将从多个维度深入剖析安卓与iOS开发的差异性,并探讨它们之间的互操作性如何实现,以期为开发者们提供一份实用的指南。
24 7
|
8天前
|
Java Android开发 Swift
探索iOS与安卓开发的差异与挑战
本文深入探讨了iOS和安卓两大移动操作系统在应用开发领域的不同点及其所面临的挑战。通过对开发环境、编程语言、用户界面设计、性能优化及市场策略的比较分析,揭示了各自平台的独特性以及开发者需要克服的技术与市场障碍。 【7月更文挑战第19天】
|
7天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的对比分析
【7月更文挑战第19天】在移动开发的广阔天地中,安卓与iOS两大阵营各据一方,它们在开发环境、用户界面设计、性能优化等方面展现出独特的魅力与挑战。本文旨在深入探讨这两个平台在技术开发和用户体验上的根本差异,并分析这些差异如何影响开发者的策略和最终用户的选择。通过比较两者的编程语言、工具、框架以及设计理念,我们将揭示各自平台的优势与局限,为开发者提供实用的参考,并为消费者呈现一个更加清晰的平台选择视角。
|
9天前
|
安全 Java Android开发
探索安卓与iOS开发的差异:构建未来应用的关键考量
【7月更文挑战第18天】在移动应用开发的广阔天地中,安卓和iOS两大平台各领风骚。本文将深入探讨这两个平台在开发过程中的主要差异,包括编程语言、用户界面设计、性能优化、安全性以及市场策略等方面。通过比较分析,旨在为开发者提供决策支持,帮助他们选择最适合自己项目需求的平台,同时考虑到用户体验和市场需求的变化,为未来的应用开发指明方向。
|
9天前
|
监控 开发工具 Android开发
探索安卓与iOS开发的差异:平台特性、工具和市场趋势
在移动应用开发的广阔舞台上,安卓与iOS两大操作系统扮演着主角。它们各自拥有独特的平台特性、开发工具和市场定位,这些差异深刻影响着开发者的决策和产品的最终形态。本文将深入分析这两大平台的关键技术差异,探讨各自的开发环境和工具集,以及它们在市场上的表现和未来的趋势,为开发者提供一个全面的视角,帮助他们在这两个平台上做出更明智的开发选择。
|
7天前
|
开发工具 Android开发 Swift
探索Android与iOS开发的差异与挑战
【7月更文挑战第20天】在移动应用开发的广阔天地中,Android和iOS两大平台如同双子星座,各自闪耀着独特的光芒。本文将深入探讨这两个平台在开发过程中的主要差异,以及开发者面临的技术挑战。我们将从开发环境、编程语言、用户界面设计、性能优化、安全性考量等多个维度展开讨论,旨在为那些即将踏入或已在这片星空下航行的开发者提供一盏明灯。
|
7天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的对比分析
在移动应用开发的广阔天地中,安卓与iOS两大阵营各自占据着半壁江山。本文将深入探讨这两个平台在开发环境、编程语言、用户界面设计以及性能优化方面的差异,并分析这些差异如何影响最终的用户体验。通过数据支持的案例分析和最新的市场研究,我们将揭示开发者如何在这两个不同的生态系统中做出战略决策,以及这些决策对应用成功的潜在影响。