react native环境安装流程

react-native安装流程

1.npx react-native init AwesomeProject报错

运行 cd ./demo/ios && pod install 即可解决

2.安装JDK

（1）brew install adoptopenjdk/openjdk/adoptopenjdk8
运行项目下运行react-native doctor 报错
✖ JDK

  • Version found: 1.8.0_191
  • Version supported: >= 8

这个报错不影响环境，注意 1.8 版本官方也直接称 8 版本，是doctor识别不了

3.创建配置文件为~/.zshrc

（1）. 可以使用echo $0命令查看你所使用的 shell
（2）.创建配置文件为~/.zshrc
（如果是 bash 则为~/.bash_profile）
在命令行输入 touch .zshrc 查看是否创建成功 则使用open $HOME/.zshrc 打开文件夹表示创建成功
（3）打开终端，输入：/usr/libexec/java_home -V

查看java安装路径，在配置java环境变量（不一定需要，但是我进行配置了）

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home CLASSPAHT=.: J A V A H O M E / l i b / d t . j a r : JAVA_HOME/lib/dt.jar: JAVAH​OME/lib/dt.jar:JAVA_HOME/lib/tools.jar PATH= J A V A H O M E / b i n : JAVA_HOME/bin: JAVAH​OME/bin:PATH: export JAVA_HOME export CLASSPATH

运行Java - version，显示

则安装成功

2.安装Android sdk时报错版本不匹配，点击show Package Details安装对应的版本

配置 ANDROID_HOME 环境变量

（1）在Android studio中查看sdk的安装路径

（2）在.zshrc 中配置 ANDROID_HOME 环境变量
export ANDROID_HOME= H O M E / L i b r a r y / A n d r o i d / s d k e x p o r t P A T H = HOME/Library/Android/sdk export PATH= HOME/Library/Android/sdkexportPATH=PATH: A N D R O I D H O M E / e m u l a t o r e x p o r t P A T H = ANDROID_HOME/emulator export PATH= ANDROIDH​OME/emulatorexportPATH=PATH: A N D R O I D H O M E / t o o l s e x p o r t P A T H = ANDROID_HOME/tools export PATH= ANDROIDH​OME/toolsexportPATH=PATH: A N D R O I D H O M E / t o o l s / b i n e x p o r t P A T H = ANDROID_HOME/tools/bin export PATH= ANDROIDH​OME/tools/binexportPATH=PATH:$ANDROID_HOME/platform-tools

环境安装成功

4.运行 npm run android

现实不能安装app，报错端口8081里面报错，切换了国外数据源后安装正常

到此这篇关于react native环境安装的文章就介绍到这了,更多相关react native环境安装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题

    这是效果: 代码: import React, {Component} from 'react'; import { View, Text, Button, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, Dimensions } from 'react-native'; import { StackActions, NavigationActions, withNavigation } from 'react-navigatio

  • 自己动手封装一个React Native多级联动

    背景 肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封装就来说说过程吧 任务开始 一. 原型图或设计图 在封装一个组件之前,首先你要知道组件长什么样子,大概的轮廓要了解 二. 构思结构 在封装之前,先在脑海里面想一下 1. 这个组件需要达到的功能是什么? 改变一级后,二级会跟着变化,改变二级,三级会变,以此类推,可以指定需要选中的项,可以动态改变每一级

  • react native 获取地理位置的方法示例

    react native 获取地理位置的方法示例

    react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口 在 react native 中,我们所用的是react native 自带的api定位功能,无需引入第三方js. react native 定位是通过Geolocation这个模块来实现的.想了解更多关于Geolocatio

  • 使用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

  • react native基于FlatList下拉刷新上拉加载实现代码示例

    react native基于FlatList下拉刷新上拉加载实现代码示例

    react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用 官方介绍:https://reactnative.cn/docs/flatlist/ 下面是效果图: ios效果图 android效果图 总体思路就是:就是计算屏幕高度,然后减去导航的头部,根据列表高度计算出每页的个数,然后向上取整.这样做的目的是:防止不满屏状态下的,onEndReac

  • react native 文字轮播的实现示例

    本着我为人人,人人为我的精神,敲过的代码就要分享出来! 项目需要做一个文字的轮播,开始想着是由下而上的滚动,但是还是写的不是很好,就先退而求其次,通过透明度来实现文字的滚动了(也不能说是滚动了,是切换). 为了贴上来还是写了些注释的,也就不一一的解释了,很简单的代码,看注释就好了.(我就是懒) import React, { Component } from "react" import { View, Text, TouchableOpacity } from "react

  • react native环境安装流程

    react native环境安装流程

    react-native安装流程 1.npx react-native init AwesomeProject报错 运行 cd ./demo/ios && pod install 即可解决 2.安装JDK (1)brew install adoptopenjdk/openjdk/adoptopenjdk8 运行项目下运行react-native doctor 报错 ✖ JDK Version found: 1.8.0_191 Version supported: >= 8 这个报错不

  • 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环境搭建(亲测)

    目录 一.基础环境 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 环境搭建的教程

    一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-

  • React Native 启动流程详细解析

    导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v0.64.2. 我们知道上述工程是一个安卓应用,打开 android/ 目录下源码文件,首先发现它创建了两个 java 文件:MainApplication.java 和 MainActivity.java,分别做了应用以及主 Activity 的定义. 安卓应用的启动流程是:在启动第一个 acti

  • 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>,以&

  • Windows下React Native的Android环境部署及布局示例

    Windows下React Native的Android环境部署及布局示例

    搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

  • 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可以看到命令里多了很

  • 教你快速搭建 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 目

随机推荐