脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Native 开发环境

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

 更新时间：2022年08月31日 14:47:53   作者：rogerwu  
这篇文章主要介绍了搭建 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 开发环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react hooks使用Echarts图表中遇到的情况及相关配置问题

    react hooks使用Echarts图表中遇到的情况及相关配置问题

    这篇文章主要介绍了react hooks使用Echarts图表中遇到的情况及相关配置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react PropTypes校验传递的值操作示例

    react PropTypes校验传递的值操作示例

    这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
    2020-04-04
  • 在React中编写样式的六种方式

    在React中编写样式的六种方式

    在React中,编写样式主要有以下几种方式,内联样式,外部样式表,CSS Modules,Styled Components,Emotion和Radium这六种样式,下面我将针对上面提到的6种方式给出详细的代码示例,需要的朋友可以参考下
    2024-01-01
  • React组件的解耦技巧分享

    React组件的解耦技巧分享

    本文我们将和大家一起来研究如何有效地将组件解耦,让我们的代码变的复用性极高,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • React项目搭建与Echarts工具使用详解

    React项目搭建与Echarts工具使用详解

    这篇文章主要介绍了React项目搭建与Echarts工具使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • React组件三大核心属性State props Refs介绍

    React组件三大核心属性State props Refs介绍

    组件实例的三大核心属性是：State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this，也就不存在组件实例这种说法，但由于它的特殊性（函数可以接收参数），所以存在Props这种属性
    2023-02-02
  • React中的useEffect(副作用)介绍

    React中的useEffect(副作用)介绍

    这篇文章主要介绍了React中的useEffect(副作用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React jsx转换与createElement使用超详细讲解

    React jsx转换与createElement使用超详细讲解

    这篇文章主要介绍了React jsx转换与createElement使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • React实现类似于Vue中的插槽的项目实践

    React实现类似于Vue中的插槽的项目实践

    本文主要介绍了React实现类似于Vue中的插槽的项目实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • React各种状态管理器的解读及使用方法

    React各种状态管理器的解读及使用方法

    这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-12-12

最新评论