教你快速搭建 React Native 开发环境

React Native 官网地址：https://www.reactnative.cn/docs/environment-setup

开发平台 Windows

目标平台 Android

1、安装依赖

必须安装的依赖有 Node、JDK 和 Android Studio，Node 版本不得低于 14，React Native 需要 JDK 11，查看 JDK 版本的指令如下：

javac -version

1-1、下载和安装 android studio

1-2、安装 Android SDK

目前编译 React Native 应用需要的是 Android 12 (S) 版本的 SDK (注意：SDK 版本不等于终端系统版本，RN 目前支持 android 5 以上设备)

2、配置 ANDROID_SDK_ROOT 环境变量

3、把一些工具添加到环境变量 path

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_SDK_ROOT%\platform-tools
%ANDROID_SDK_ROOT%\emulator
%ANDROID_SDK_ROOT%\tools
%ANDROID_SDK_ROOT%\tools\bin

4、创建新项目

npx react-native init AwesomeProject

5、修改阿里云镜像

尝试阿里云提供的maven 镜像，将android/build.gradle中的jcenter()和google()分别替换为maven { url 'https://maven.aliyun.com/repository/jcenter' }和maven { url 'https://maven.aliyun.com/repository/google' }（注意有多处需要替换）。

6、运行项目

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

7、如果项目长时间无法启动，可以执行如下操作，查看原因

npx react-native start

如上图，解决端口被占用的问题后，重新运行项目，即可启动 android 模拟器

8、Visual Studio Code 安装扩展程序ES7 React/Redux/GraphQL/React-Native snippets，即可通过 输入 rnc 新建一个 react 类组件模板

import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class App extends Component {
  render() {
    return (
      <View>
        <Text> textInComponent </Text>
      </View>
    )
  }
}

到此这篇关于教你快速搭建 React Native 开发环境的文章就介绍到这了,更多相关React Native 开发环境内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VSCode 配置React Native开发环境的方法

    VSCode 配置React Native开发环境的方法

    本文介绍了VSCode 配置React Native开发环境的方法,分享给大家,具体如下: 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上安装了react native, 如果没有安装,请使用npm install -g react-native-cli安装 或者按照官方文档操作 新建一个RN工程 并使用VSCode打开 安装完成后 按F1可以看到命令里多了很

  • 使用Win10+Android+夜神安卓模拟器,搭建ReactNative开发环境

    使用Win10+Android+夜神安卓模拟器,搭建ReactNative开发环境

    前言 网上的教程皮的简直不谈了,非要搞个AndroidStdio,你以为呢?反手就是一重锤,我就是不装,第一开发的很多工作都不需要这个IDE,第二运行起来还很吃内存,经过实践有如下的教程,请大家指教. 安装 git 不说了,我相信你早就安装了,有需要的参考:https://www.jb51.net/article/148066.htm Java8 需要配置环境变量JAVA_HOME,CLASS_PATH和path路径,配置方式如下 安装Android SDK 参考我的另一篇文章 配置androi

  • 教你使用vscode 搭建react-native开发环境

    教你使用vscode 搭建react-native开发环境

    问题 代码没有提示: 许多刚接触RN开发的非前端同学,都会问"哪个编辑器有智能提示?"...而对于前端同学来说,现在的日子已经好很多了,要什么自行车. 低级代码错误: 这里的错误是指类似拼写错误,符号错误等.写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题. 解决办法 可选的方案大概有: 使用typescript: 直接使用有静态类型支持的js版本,but要再学习一套语法,而且我的代码都是ts写的,但很多好的公共库不是啊. 使用flow: 由于网络的原因,这个环境

  • VSCode搭建React Native环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的

  • React Native 搭建开发环境的方法步骤

    React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

  • React Native搭建iOS开发环境

    React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • 最新版React Native环境搭建(亲测)

    最新版React Native环境搭建(亲测)

    目录 一.基础环境 1.1 安装Node.js 1.2 添加Android原生环境 1.3 添加iOS原生环境 二.创建示例项目 2.1 创建项目 2.2 运行项目 2.3 调试项目 三.集成到原生应用 3.1 集成到原生Android应用 3.2 集成到原生iOS应用 工欲善其事,必先利其器.搭建React Native开发环境,需要安装以下辅助工具. Node.js:React Native需要借助Node.js来创建和运行JavaScript代码. 原生开发工具及环境:React Nati

  • 教你快速搭建 React Native 开发环境

    教你快速搭建 React Native 开发环境

    React Native 官网地址:https://www.reactnative.cn/docs/environment-setup 开发平台 Windows 目标平台 Android 1.安装依赖 必须安装的依赖有 Node.JDK 和 Android Studio,Node 版本不得低于 14,React Native 需要 JDK 11,查看 JDK 版本的指令如下: javac -version 1-1.下载和安装 android studio 1-2.安装 Android SDK 目

  • 搭建React Native热更新平台的详细过程

    搭建React Native热更新平台的详细过程

    目录 一,什么是热更新 二,热更新方案 三,热更新原理 四,CDN 热更新方案 五,纯 CDN 方案的弊端 六,线上方案 七.整体方案梳理 八,总结 一,什么是热更新 所谓热更新,也叫做动态更新,一种类似 Web 的更新方式.相对于 App 的发版更新而言,热更新能及时的修复线上存在的问题,大幅的提升业务迭代效率.我们都知道,互联网业务讲究兵贵神速,如果业务能够通过热更新来快速发版和迭代,这就相当于在产品和用户之间搭建了一座能够随时通行的桥梁,代替了原来好几周才能有一次迭代的问题. 那么,热更新

  • 详解如何从零开始搭建Express+Vue开发环境

    详解如何从零开始搭建Express+Vue开发环境

    准备工作 1. 为前端选择合适的预处理工具和资源管理工具 预处理工具又分为 js 预处理工具和 css 预处理工具.Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制,所有 js 代码文件在被 html 页面引入后将共用同一个命名空间.所以才出现了各种"标准"尝试解决这个问题,但他们都不是原生的,需要额外的工具对代码进行特殊处理.虽然 ES6 终于引入了模块机制,但以现在的浏览器支持程度,还不足以"毫无顾虑地随拿随用".所以 js 预处理工具最主要

  • 使用docker搭建一套开发环境全家桶的详细教程

    DNMP介绍 DNMP(Docker + Nginx + MySQL + PHP7/5 + Redis)是一款全功能的LNMP一键安装程序.支持的服务丰富.功能强大.使用简单.兼容多平台.是适用于多端的一款docker开发与生产环境的PHP环境全家桶. DNMP项目特点: 100%开源 100%遵循Docker标准 支持多版本PHP共存,可任意切换(PHP5.4.PHP5.6.PHP7.1.PHP7.2.PHP7.3) 支持绑定任意多个域名 支持HTTPS和HTTP/2 PHP源代码.MySQL

  • Ubuntu 16.04 64位中搭建Node.js开发环境教程

    前言 首先说下本文的系统环境是:Ubuntu 16.04 64位,本文内容亲测可用, 大家可以请放心借鉴参考,下面来一起看看详细的步骤. 使用淘宝镜像 淘宝镜像官网是https://npm.taobao.org/ 使用淘宝镜像前请自行安装好 npm 和 node node 和 npm 的安装 node可以在这里下载 本文使用的是官方推荐v4.4.4长期支持版 下载并解压 node-v4.4.4-Linux-x64.tar.xz tar -xJf node-v4.4.4-linux-x64.tar

  • 图文详解Android Studio搭建Android集成开发环境的过程

    图文详解Android Studio搭建Android集成开发环境的过程

    有很长一段时间没有更新博客了,最近实在是太忙了,没有时间去总结,现在终于可以有时间去总结一些Android上面的东西了,很久以前写过这篇关于使用Android Studio搭建Android集成开发环境,不过一直没有发表出来,写这篇文章的目的是记录一下Android开发环境的搭建过程,这篇文章写得一般般,主要是记录了整个搭建过程,没什么技术含量,觉得有帮助的朋友就看一下! 一.Android Studio简单介绍 2013年GoogleI/O大会首次发布了Android Studio IDE(A

  • 使用WAMP搭建PHP本地开发环境

    使用WAMP搭建PHP本地开发环境

    写在前面的话 PHP是服务器脚本语言,所以需要在服务器上才能运行.作为新手,搭建服务器可能需要捣腾很久,有可能还搞不定.所以在入门阶段,为了把更多时间用在熟悉编程语言上,使用集成环境是最好也是最方便的选择.而本文就来介绍如何在windows平台搭建PHP开发环境. 安装集成环境 1.下载集成环境包 WampServer官网 本人下载的是Wampserver 3.0.6 64 bit ,下载完成之后双击安装即可. wamp 3.0.6 安装的软件分别为: Apache 2.4.23 PHP 5.6

  • 在MAC上搭建python数据分析开发环境

    最近工作转型到数据开发领域,想在本地搭建一个数据开发环境.自己有三年python开发经验,马上想到使用numpy.scipy.sklearn.pandas搭建一套数据开发环境. ubuntu的环境,百度中文章比较多,搭建起来非常顺利.MAC环境的资料比较少,百度出来的,已经不对了,那我就来补充一篇吧. MAC自带python,python的安装我就不多说了. 安装pip 我喜欢用pip安装python库,非常方便,pip的安装只能用源码了. #下载源代码 https://pypi.python.

随机推荐