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

这里写图片描述

目录
相关文章
|
18天前
|
Java Android开发
Android 开发获取通知栏权限时会出现两个应用图标
Android 开发获取通知栏权限时会出现两个应用图标
12 0
|
24天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
20 0
|
1月前
|
设计模式 人工智能 开发工具
安卓应用开发:构建未来移动体验
【2月更文挑战第17天】 随着智能手机的普及和移动互联网技术的不断进步,安卓应用开发已成为一个热门领域。本文将深入探讨安卓平台的应用开发流程、关键技术以及未来发展趋势。通过分析安卓系统的架构、开发工具和框架,本文旨在为开发者提供全面的技术指导,帮助他们构建高效、创新的移动应用,以满足不断变化的市场需求。
18 1
|
8天前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
13 0
|
9天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
18天前
|
Android开发
Android开发小技巧:怎样在 textview 前面加上一个小图标。
Android开发小技巧:怎样在 textview 前面加上一个小图标。
10 0
|
18天前
|
Android开发
Android 开发 pickerview 自定义选择器
Android 开发 pickerview 自定义选择器
10 0
|
24天前
|
Java Android开发
Android开发系列全套课程
本系列课程面向有java基础,想进入企业从事android开发的计算机专业者。学习搭配实战案例,高效掌握岗位知识。
16 1
|
26天前
|
数据可视化 测试技术 Android开发
安卓应用开发:打造高效用户界面的五大技巧
【2月更文挑战第30天】在竞争激烈的应用市场中,一个流畅且直观的用户界面(UI)对于安卓应用的成功至关重要。本文将探讨五个关键的UI设计技巧,这些技巧旨在提升用户体验并优化性能。我们将深入分析布局优化、资源管理、动画效果、响应式设计和测试流程等方面,并提供实用的代码示例和最佳实践,帮助开发者构建既美观又高效的安卓应用。
|
26天前
|
监控 算法 Android开发
安卓应用开发中的内存优化策略
【2月更文挑战第30天】随着移动设备性能的不断提升,用户对应用程序的体验要求越来越高。在安卓应用开发中,内存管理是影响应用性能和用户体验的关键因素之一。本文将探讨针对安卓平台的内存优化技巧,包括避免内存泄漏、合理使用数据结构和算法、优化图片资源处理等策略,旨在帮助开发者提升应用性能和稳定性。
19 1