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

这里写图片描述

目录
相关文章
|
4月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
483 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
446 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
882 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
开发工具 Android开发
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
665 11
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
|
4月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
239 0
|
5月前
|
Java 开发工具 Maven
【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
392 6
|
7月前
|
安全 数据库 Android开发
在Android开发中实现两个Intent跳转及数据交换的方法
总结上述内容,在Android开发中,Intent不仅是活动跳转的桥梁,也是两个活动之间进行数据交换的媒介。运用Intent传递数据时需注意数据类型、传输大小限制以及安全性问题的处理,以确保应用的健壯性和安全性。
486 11
|
7月前
|
移动开发 Java 编译器
Kotlin与Jetpack Compose:Android开发生态的演进与架构思考
本文从资深Android工程师视角深入分析Kotlin与Jetpack Compose在Android系统中的技术定位。Kotlin通过空安全、协程等特性解决了Java在移动开发中的痛点,成为Android官方首选语言。Jetpack Compose则引入声明式UI范式,通过重组机制实现高效UI更新。两者结合不仅提升开发效率,更为跨平台战略和现代架构模式提供技术基础,代表了Android开发生态的根本性演进。
313 0
|
9月前
|
运维 前端开发 数据可视化
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
本文分享了一个基于React 19构建的用户注册表单系统,采用模块化CSS和状态驱动视图更新,实现实时校验、错误提示与提交反馈等功能。核心亮点包括验证规则引擎(如密码复杂度校验)、交互反馈体系(输入框警示、按钮禁用)及加载动画优化。通过函数式更新确保状态同步,正则表达式实现多条件验证,CSS伪元素打造流畅体验。代码结构清晰,可扩展性强,适合作为React表单开发模板。文末附CodeBuddy免费下载链接,助力高效开发!
237 1
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
|
8月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
376 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡

热门文章

最新文章