精华内容
下载资源
问答
  • React-Native环境搭建流程 React-Native:0.63,React:17.0 对应系统对应不同环境:Mac->Xcode,Windows->AndroidStudio,RN->VSCode 希望这篇文章对你的问题可以有效地解决。防止以后忘记环境安装流程,对...

    React-Native环境搭建流程 React-Native:0.63,React:17.0

    对应系统对应不同环境:Mac->Xcode,Windows->AndroidStudio,RN->VSCode


    希望这篇文章对你的问题可以有效地解决。防止以后忘记环境安装流程,对你以后更换工作并且又要重新环境有用处。蟹蟹!


    前言

    不多bb,直接开造

    以下是本篇文章正文内容,下面案例可供参考

    一、基本步骤

    基本步骤,搭建完直接启动就可以

    命令行工具:(react-native-cli)npm install -g yarn react-native-cli

    编译器: VSCode.RN开发

    组件库:Node.组件下载库 Npm,国内还是用 Yarn。Node-versions>12

    Android编译器:AndroidStudio.Android原生,其自带SDK

    Android编译环境:JDK1.8.跑AS.JDK-versions>1.8

    IOS编译环境:XCode.IOS原生,几十个G,下载完直接跑就ok

    组件下载工具:
    Npm:Node自带,不过国内用做最好在控制台cmd运行,npx nrm use taobao ,淘宝源
    Yarn:npm install -g yarn,代替npm的国内工具下载效率更加快,npm可能要翻墙

    IOS包管理器:CocoaPods.可以理解为ios的npm。0.60之后用来管理依赖的

    Mac包集成管理器:Homebrew.可以用来安装Node & Watchman啥的.brew install node

    监视文件变更:Watchman.(packager 可以快速捕捉文件的变化从而实现实时刷新).热加载


    二、创建项目

    1.创建项目文件
    npx react-native init Demo --version X.XX.X   下载成功后在你这个运行的cmd控制台文件夹里面找到你初始化的项目比如Demo
    
    2.打开项目文件
    (1.打开你创建项目Demo,在vscode里面找到即可
    (2.并且在vscode里面新建一个终端
    (3.检查项目结构里面是否有node_modules文件
    (4.打开项目结构最底部的一个package.json文件的react版本和react-native版本
    
    3.初始化项目
    yarn install  或者  npm install   
    正常来说你的Demo项目里面就已经有一个名叫node_modules的文件,这就是你下载的组件啥的七七八八都在里面
    
    4.打开android项目文件
    (1.打开AndroidStudio后
    (2.点击第二个Open an Existing Project
    (3.找到你在之前init创建的Demo项目并在你项目里面找到你的android文件。
    这就是你的android项目,原生代码放置处,一些关于原生的地方就在这写,ios也是。
    检查有无错误。检查是否连接手机。检验JDK路径。检验SDK是否下载。检验Gradle版本是否对应AndroidStudio
    
    5.连接USB手机
    (1.一台安卓手机
    (2.连接USB数据线
    (3.打开USB文件传输模式
    (3.打开手机开发者模式。小米手机>我的设备>全部参数>点击MIUI版本>开发者选项>打开USB调试和USB安装
    
    6.启动项目
    直接在VScode中的终端控制台运行 react-native run-android。可能无法连接需要映射端口adb reverse tcp:8081 tcp:8081
    注意如果你用的是Mac启动的又是IOS,那就先启动服务react-native start,再启动模拟器react-native run-android
    
    
    

    三、部分问题解决方案

    部分问题解决,也有可能我写的有错误,欢迎大家来指正,防止本文章继续错下去。麻烦了

    1.Npm和JDK版本问题
    答:注意 Node 的版本应大于等于 12,而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。
    
    2.npm下载时间速度太慢甚至卡住
    答:切换淘宝源。使用nrm工具切换淘宝源 npx nrm use taobao或者使用yarn替代 npm  npm install -g yarn
    
    3.下载cocoapods速度过于慢
    答:
    	ctrl+c中断
    	$ brew install cocoapods 
    	$ cd ios
    	$ pod install --repo-update
    用brew来装cocoapods,然后到项目目录里更新
    中途遇到SDK “iphoneos” cannot be located错误,参照来指定command路径,然后重新pod install --repo-update
    

    总结

    这里就是本文章的所有内容,希望对你有所帮助。ReactNative官网项目搭建流程.谢谢大家

    展开全文
  • react-native 环境搭建

    2021-04-09 10:19:56
    https://reactnative.cn/docs/getting-started.html Node Node 的版本必须⾼于 8.3, npm config set registry https://registry.npm.taobao.org --global npm config set disturl ...

    react-native 环境搭建

    大部分看中文网,这里补充一些细节

    • react 中文网 环境搭建

      https://reactnative.cn/docs/getting-started.html

    Node

    Node 的版本必须⾼于 8.3,

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --globa
    

    安装及搭建python环境

    Python 的版本必须为 2.x(不⽀持 3.x)

    https://www.runoob.com/python/python-install.html

    安装jdk及搭建java环境

    JDK 的版本必须是 1.8(⽬前不⽀持 1.9 及更⾼版本)

    • 下载 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

      下载时先同意协议(Accept License)

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TLsjsWoe-1617934778780)(react-native 环境搭建.assets/image-20200115101450870.png)]

    • 配置环境变量 https://blog.csdn.net/qq_26631651/article/details/82666336

    Yarn、React Native 的命令⾏⼯具(react-native-cli)

    arn](http://yarnpkg.com/)是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli
    

    安装完 yarn 后同理也要设置镜像源:

    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global
    

    安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

    搭建android 环境

    • 下载工具及sdk等等的网站

      https://www.androiddevtools.cn/

    1. 从上面的网址下载 Android Studio

    2. 打开翻墙软件

      其实可以不打开翻墙软件

    3. 安装 Android Studio

    4. 如果出现了Android SDK add-on list d额错误,点击取消无视他

    5. 然后去下载各种react-native 需要的东西(中文网上有说明)

    展开全文
  • 解决方案是在项目目录下的...# pod 'boost-for-react-native', :git => 'https://gitee.com/vito17326193826/boost-for-react-native’ target 'AwesomeProjectTests' do inherit! :complete # Pods for testin

    解决方案是在项目目录下的ios文件夹

    # vim Podfile
    # 添加代码
    # pod 依赖名称, git : => 依赖的路径
    # 例如: 
    # pod 'boost-for-react-native', :git => 'https://gitee.com/vito17326193826/boost-for-react-native’
    
    target 'AwesomeProjectTests' do
        inherit! :complete
        # Pods for testing
        pod 'boost-for-react-native', :git => 'https://gitee.com/vito17326193826/boost-for-react-native’
    
      end
    

    把你下不来的依赖搞成你国内fork的仓库地址,
    最后 pod install
    大功告成
    在这里插入图片描述

    展开全文
  • mac环境安装 1.mac 创建ios项目 1.安装Xcode 2.安装node 3.安装python 4.打开终端 执行 brew install watchman 注意:执行的时候会卡住不动,按一下control+c 5.npm config set registry ...

    mac环境安装

    1.mac 创建ios项目

    1.安装Xcode
    

    2.安装node
    

    3.安装python
    

    4.打开终端 执行 brew install watchman
      注意:执行的时候会卡住不动,按一下control+c
    

    5.npm config set registry https://registry.npm.taobao.org --global
      npm config set disturl https://npm.taobao.org/dist --global
    

    6.npm install -g yarn react-native-cli
    

    7.yarn config set registry https://registry.npm.taobao.org --global
      yarn config set disturl https://npm.taobao.org/dist --global
    

    8.启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools
    

    在这里插入图片描述

    9.在 项目目录下 创建项目 react-native init AwesomeProject
    

    10.编译并运行项目
    	cd AwesomeProject
    	react-native run-ios
    

    2.mac 创建 android 项目

    1.在创建完ios项目后,有些命令就不用重复执行了
    

    2.下载 android studo 选择一个大于2.0的版本下载
        https://www.androiddevtools.cn/
    

    3.下载java jdk
    	https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
    

    4.(2,3步)安装与配置观看此视频
    https://ke.qq.com/webcourse/index.html#cid=197101&term_id=100233637&taid=1220870223888877&vid=z1417kmxask
    

    5.配置 ANDROID_HOME 环境变量
    	(1)打开终端
    	(2)输入 vi ~/.bash_profile
    	(3)下按一下字母  i
    	(4)复制此内容粘贴到打开文件头部
    		export ANDROID_HOME=$HOME/Library/Android/sdk
    		export PATH=$PATH:$ANDROID_HOME/tools
    		export PATH=$PATH:$ANDROID_HOME/tools/bin
    		export PATH=$PATH:$ANDROID_HOME/platform-tools
    		export PATH=$PATH:$ANDROID_HOME/emulator
    	(5)按esc
    	(6)输入 :wq退出编辑模式
    

    6.打开新的终端 输入 adb 验证是否配置成功(打印出命令内容则成功)
    

    7.创建项目(把安卓手机通过usb先链接到电脑上)
    	react-native init AwesomeProject
    	cd AwesomeProject
    	react-native run-android
    
    展开全文
  • React-Native环境搭建各种问题处理

    千次阅读 2018-04-04 19:36:16
    最近打算入门学习react-native的开发,但是在环境搭建时候出现了各种问题。在这里跟大家分享下我踩过的各种坑。环境搭建:根据官网http://facebook.github.io/react-native/ 给出的步骤。环境很容易就搭建起来了 1...
  • 关于React-Native React native源自ReactReact 是一套可以用简洁的语法高效绘制Dom的框架。React中需要使用JSX语法,JSX是对JavaScript的扩展。JSX可以将CSS,HTML,表达式进行一起书写,简化了html代码书写的形式...
  • 从来不写博客,这次做了笔记,就放...1、React-Native环境搭建   http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86wind ows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-nati
  • React-Native环境搭建 一.安装JAVA JDK Java和React Native没有直接关系.他们是两个不同的东西. React Native允许您仅使用JavaScript构建移动应用程序.它可以让您为Android设备构建移动应用程序。Android设备使用...
  • React-Native环境搭建需要: 1、安装Java JDK 2、安装Android Studio 3、安装node.js 4、安装git ...7、测试环境是否搭建好附:React-Native中文网环境搭建链接 https://reactnative.cn/docs/0.4
  • React-native 环境搭建

    2022-01-12 17:42:03
    我自己已经安装配置好了Android的开发环境,所以这个地方不记录相关环境搭建和配置。 1、Node 为了方便管理我们node的版本,我打算用nvm管理node版本,所以需要县安装nvm; nvm-windows 最新下载地址: ...
  • React-Native:简单入门教程+环境搭建

    千次阅读 2020-06-12 15:51:11
    简单的RN(React-Native)入门教程 RN(React-Native),是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用...
  • 参考资料:...环境react-native(0.58.6) 第一部分:注册app 1.打开控制台,并执行代码: code-push app add <appName> <os> <platform> 生成发布环境的DelopmentKey:Productio...
  • React-Native开发环境搭建

    千次阅读 2018-01-15 15:00:58
    万事开头难,开始学习前React-Native之前,我们首先需要搭建React-Native的开发环境。关于React-Native开发环境搭建的教程网上已经有很多了,在这里不再进行赘述,下面列一些推荐的环境搭建教程: React-...
  • react-native环境搭建

    2018-02-06 22:03:49
    安装react-native-cli,命令忘记了,不过很简单,一查就知道。 npm install wordwrap //必须在项目上一级目录,不能加-g react-native init wilcotest npm install uuid –save npm install babel-template –save ...
  • (1)参考官网地址:https://reactnative.cn/docs/getting-started.html  1》安装相应的node环境、(npm、yarn)包管理器、(watchman)文件检测服务、  (react-native-cli)脚手架、(CocoaPods)第三方包依赖...
  • 请严格参照react-native中文网的搭建开发环境文档进行操作。 安装Java的jdk并配置相关环境变量。 安装Android-studio,安装时会自动安装安卓开发所需的sdk。 以上依据文档要求,下载相应版本,并配置好后,...
  • React-Native 环境搭建

    千次阅读 2018-06-09 16:35:03
     对,你没有看错就是简简介,因为一句话概括,我想说的是,React Native开发的APP不是web APP还是原生APP,不过是通过js可以和原生组件库结合。 二、搭建Android开发环境  因为本人是做Androi的,也没有mac...
  • react-native创建新项目的App.js文件中有以下代码 import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; 测试发现,这是官方...
  • (1)配置react-native 安卓运行环境 (2)启动项目步骤: 使用cmd命令行,进入工程目录,运行 node node_modules\react-native\packager\packager.js 保持packager开启,另外打开一个命令行窗口,然后在工程目录下...
  • 先按照中文文档步骤搭建环境react-native 中文文档 坑一:使用react-native init Demo新建的项目 , 当执行 react-native run-ios 后进入如下图的状态 , 等待多久也都没有任何响应 出现这种情况原因是 react-...
  • 1、安装node。 官网下个安装包 node -v查看下版本号。 2、安装jdk。 jdk安装包 我是电脑管家里搜的。 下载安装后,一定要配置一下环境变量。参考 3、安装Android studio。 安装包 链接:...react ...
  • 所以这篇博客主要记录react-native环境搭建以及遇到的问题解决办法。 1. 安装java jdk (1)官网下载java jdk安装包 JDK官网链接,根据电脑属性下载就好,下载完成后next就完事了。 (2)配置环境变量 修改环境变量...
  • React-Native+Idea环境搭建 ...
  • 深入小程序系列之三、 ReactNative和小程序混编 背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install -g react-native-cli yarn 官方的已经有...
  • react-native全栈项目搭建

    千次阅读 2018-11-09 18:37:15
    再贴上最终最终成果效果图:(在Android模拟器运行效果图) reactNativeApp ...这是一个搭建好的react native项目架构,采用react-native官方推荐的react-navigation导航库,项目StackNavigator与T...
  • 本文分享的是在环境搭建和扩展中会遇到的问题与解决方案。的出现,为开发者们带来了冲动和激情,令开发者和开发者都为之痴迷。瞬间各类技术论坛、技术社区甚至出版社都争先报道其相关内容。然而对于一般的初学者来说...
  • 配置 ANDROID_HOME 环境变量 React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个...
  • React-Native环境搭建

    2018-11-16 13:54:39
    React-Native环境搭建 最近要做一个移动端的app项目,所以在办公电脑上安装了一下rn的环境 本人用的是mac噢,所以环境都是以mac为标准 下载homebrew /usr/bin/ruby -e "$(curl -fsSL ...
  • 大家好,好久没有更新博客了,小苏几天研究了一个下午的react-native环境搭建 在这过程中遇到了许多的问题,希望在这里给大家讲解一下遇到的问题跟解决问题的方案! 首先这里是官方给出的基础步骤 一定要全局安装...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,608
精华内容 4,643
关键字:

react-native环境搭建