rn环境搭建_android rn 环境搭建 - CSDN
精华内容
参与话题
  • 01 初识RN - 环境搭建

    2018-03-21 10:18:56
    搭建环境 参考地址 点击打开链接01 创建工程 CD到你想要的文件夹 react-native init (项目名字)02 (注意点)因为自己用Yarn替代了 npm 所以很多命令都要用Yarn替换 安装完yarn之后就可以用yarn代替npm了,例如用...

    搭建环境  参考地址   点击打开链接

    01   创建工程   CD到你想要的文件夹    react-native init (项目名字)

    02  (注意点)因为自己用Yarn替代了 npm     所以很多命令都要用Yarn替换    

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

    03   MAC上面运行会自动弹出终端工具 不要关闭  这算是个本地服务器   第一次会比较慢

    模拟器正常弹出      显示欢迎界面    iOS搭建完成   


    没做过安卓开发 安卓的环境弄死我了  

    我对照文档安装好Android studio  与模拟器后  运行报错了一个错误  

    unable to load script from assets 'index.android bundle'...

     命令 -----     react-native run-android


    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/


    记住 要在项目根目录下面运行这个代码   

    用android studio 运行  正常运行   用命令行    

    react-native run-android

    报错  出现  

    mac Could not determine java version from '9.0.4'

    我的做法是  先看自己本地的java版本    java  -version

    我的是9.0.1  然后删除这个版本   

    sudo rm -rf /Library/Java/JavaVirtualMachines/jdk-9.jdk 

    下载1.8.0  java     命令行指定环境变量 

    sudo vim /etc/profile

    参考点击打开链接      如果发现读写权限不够  可以wq!强制保存

    再次运行   运行成功  但是模拟器上面  没有自动打开helloWorld  app 经过老维头的远程  没有安装 tools  

    brew cask install android-platform-tools

    安装成功后  

    添加到PATH变量中

    你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。具体做法仍然是在~/.bash_profile中添加:

    export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
    最后  大功告成    fuck  you   Android

    展开全文
  • rn开发环境搭建

    2018-06-14 11:18:33
    1.Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样:@powershell -NoProfile -ExecutionPolicy Bypass -Command &...

    1.Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样:

    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin


    2.打开命令提示符窗口,使用Chocolatey来安装Python 2.

    choco install python2


    3.打开命令提示符窗口,使用Chocolatey来安装NodeJS。

    choco install nodejs.install


    4.设置npm镜像

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

    验证:

    // 配置后可通过下面方式来验证是否成功npm config get registry

    5.安装Yarn、React Native的命令行工具(react-native-cli)#

    npm install -g yarn react-native-cli


    6.设置yarn镜像

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




    展开全文
  • rn_windows平台环境搭建

    2020-07-30 23:30:05
    基于react,windows系统搭建虚拟环境,安装步骤,每一步都有截屏
  • rn 环境搭建

    2019-10-05 14:50:25
    搭建开发环境 欢迎使用 React Native!这篇文档会帮助你搭建基本的 React Native 开发环境。如果你已经搭好了环境,那么可以尝试一下编写 Hello World。 完整原生环境 简易沙盒环境 Follow these ...

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

    搭建开发环境

    欢迎使用 React Native!这篇文档会帮助你搭建基本的 React Native 开发环境。如果你已经搭好了环境,那么可以尝试一下编写 Hello World

    • 完整原生环境  
    • 简易沙盒环境

    Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Create React Native App, you'll need this section.

    根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。

    如果阅读完本文档后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程(macOS iOSmacOS Androidwindows Android)、windows 环境搭建文字教程、以及常见问题。注意!视频教程或者其他网络上的博客和文章可能和本文档有所出入,请以最新版本的本文档所述为准!

    开发平台: macOS Windows Linux 目标平台: iOS Android

    安装依赖

    必须安装的依赖有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

    虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

     

    注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

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

    Yarn、React Native 的命令行工具(react-native-cli)

    Yarn是 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 开发环境

    如果你之前没有接触过 Android 的开发环境,那么请做好心理准备,这一过程相当繁琐。请万分仔细地阅读下面的说明,严格对照文档进行配置操作。

    译注:请注意!!!国内用户必须必须必须有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是无法正常翻墙。

    1. 安装 Android Studio

    首先下载和安装 Android Studio,国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM) (AMD 处理器看这里)
    • Android Virtual Device

    然后点击"Next"来安装选中的组件。

    如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。

    安装完成后,看到欢迎界面时,就可以进行下面的操作了。

    2. 安装 Android SDK

    Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android4.1 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

    你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

    Android Studio Welcome

    SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

    在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):

    • Android SDK Platform 28
    • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

    然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

    最后点击"Apply"来下载和安装这些组件。

    3. 配置 ANDROID_HOME 环境变量

    React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

    打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

    ANDROID_HOME Environment Variable

    SDK 默认是安装在下面的目录:

    c:\Users\你的用户名\AppData\Local\Android\Sdk
    

    你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。

    你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

    4. 把 platform-tools 目录添加到环境变量 Path 中

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

    此目录的默认路径为:

    c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools
    

    创建新项目

    使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:

    react-native init AwesomeProject
    

    提示:你可以使用--version参数(注意是个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

    Windows 用户请注意,请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!

    如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用

    准备 Android 设备

    你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。后面我们所有的文档除非特别说明,并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整,但性能较差。第三方模拟器性能较好,但可能需要付费,或带有广告。

    使用 Android 真机

    你也可以使用 Android 真机来代替模拟器进行开发,只需用 usb 数据线连接到电脑,然后遵照在设备上运行这篇文档的说明操作即可。

    使用 Android 模拟器

    你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像下面这样:

    Android Studio AVD Manager

    如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备。点击"Create Virtual Device...",然后选择所需的设备类型并点击"Next",然后选择Pie API Level 28 image.

    译注:请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。

    如果你还没有安装 HAXM(Intel 虚拟硬件加速驱动),则先点击"Install HAXM"或是按这篇文档说明来进行安装。

    然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了,启动完后我们可以尝试运行应用。

    编译并运行 React Native 应用

    确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行react-native run-android

    cd AwesomeProject
    react-native run-android
    

    如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。

    如果你的设备的 Android 版本低于 5.0,则可能在运行时看到红屏,请阅读在设备上运行这篇文档来按照步骤解决。

    AwesomeProject on Android

    react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 或是Nuclide中直接运行应用。

    译注:建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。

    如果你无法正常运行,遇到奇奇怪怪的红屏错误,先回头仔细对照文档检查,然后可以看看论坛的求助专区。不同时期不同版本可能会碰到不同的问题,我们会在论坛中及时解答更新。但请注意千万不要执行 bundle 命令,那样会导致代码完全无法刷新。

    修改项目

    现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

    • 使用你喜欢的文本编辑器打开App.js并随便改上几行
    • 按两下 R 键,或是在开发者菜单中选择 Reload JS,就可以看到你的最新修改。

    完成了!

    恭喜!你已经成功运行并修改了你的第一个 React Native 应用。

     

    转载于:https://www.cnblogs.com/syscn/p/11300270.html

    展开全文
  • RN开发环境搭建-window

    千次阅读 2019-07-04 11:13:11
    RN开发环境搭建-window 参考博客 react native 中文网 搭建开发环境 React Native入门系列:如何搭建RN环境(Windows篇) 环境清单 1、nodejs 2、React Native Command Line Tools 3、Python2 4、Java ...

    RN开发环境搭建-window

    参考博客
    react native 中文网 搭建开发环境
    什么博文都没有官网给得文档详细和全面喽,建议初次搭建RN环境的时候先去官网开心地看一遍文档。

    React Native入门系列:如何搭建RN环境(Windows篇)
    再看看别人的博客,汲取下他人的学习经验(介都是随便百度到的一篇,看过便记录一下 )

    最后就是自个开心地开始装软件,掉坑里,爬出来,再掉坑里的实践记录喽~~

    环境清单

    1、nodejs
    2、React Native Command Line Tools
    3、Python2
    4、Java SE Development Kit (JDK)
    5、Android Studio安装和环境配置

    Python2 安装

    参考 博客 windows下安装python 要看一下这东东,去配置环境变量

    博文里说
    “将下面这行内容添加到Path变量的开始位置:
    C:\Python27;C:\Python27\Scripts; ”
    意思就是把python2的安装路径和 Scripts 路径加到环境变量中 完事

    听官网文档的话, 去下载Python2 下载页面
    在这里插入图片描述
    配置环境变量

    我自己建了文件夹 Environment,看自己喜欢喽,想安装在哪里就安装在哪里
    在这里插入图片描述

    测试一下是否安装成功,注意是大写的 V ,(一般不都是小写v的嘛)
    在这里插入图片描述

    Java SE Development Kit (JDK)

    Java SE安装参考经验 要看一下这东东,去配置环境变量
    听官网文档的话, JDK 的版本必须是 1.8 下载页面
    (谁能告诉我为什么 8u201 就是 1.8版本 ㄟ( ▔, ▔ )ㄏ,我满网页找,找了好久的1.8都没找到)
    在这里插入图片描述
    配置环境变量,把java安装路径下的 lib 、lib\ tools.jar 、bin 、jre\bin 添加到环境变量中
    在这里插入图片描述
    测试一下是否安装成功
    在这里插入图片描述

    Android Studio安装和环境配置

    https://reactnative.cn/docs/getting-started.html#1-安装-android-studio
    这个直接看react native 中文网的 Android 开发环境 安装流程就够了,写得十分详细
    (SDK默认路径:C:\Users\用户名\AppData\Local\Android\sdk)
    第一次按照官方文档的步骤翻墙一步一步安装,在装模拟器的时候失败了三次以上。整个过程差不多花了半天的时间吧,还算比较顺利,下载了大概3个G左右的资源。

    然后第一台电脑安装成功后,我机智地去 备份了安装包和 下载 的 sdk 东东。然后开始第二台电脑的安装~
    在这里记录第二次安装的过程

    step1 : 单击安装包进行安装
    在这里插入图片描述
    step2: 直接点 X 关闭不能访问 android sdk add-on list
    在这里插入图片描述
    step3: 去C:\Users\用户名\AppData\Local路径下新建 Android 文件夹,打开Android文件夹后新建 sdk 文件夹,对喽…就是在手动制造SDK默认路径(SDK默认路径:C:\Users\用户名\AppData\Local\Android\sdk)
    把在第一台电脑上sdk默认路径中下载好的东东全部拷贝过来!!
    在这里插入图片描述
    step4:然后好像可以了,点Finish
    在这里插入图片描述
    step5: 安装完之后,查看设置,该勾上的都是勾好的,说明拷贝过去的sdk管用~
    在这里插入图片描述
    补充:这里也要配置一下环境变量,去android 的 SDK默认路径下打开platform-tools 的路径复制下来,把platform-tools 添加到环境变量中,这样就可以全局cmd 使用 平台工具里的 adb 。

    C:\Users\用户名\AppData\Local\Android\sdk\platform-tools
    

    step6:通过这种方式安装好后,打开模拟器调试项目居然报错~~~~
    在这里插入图片描述
    好吧,百度一番后,说是要手动去安装一下截图中路径中的这个intelhaxm-android.exe,(疑问:系不系之前连外网在线安装sdk的时候,自动安装了这个?)
    在这里插入图片描述
    差不多这样,第二次安装所花时间不超过1个小时,开心!

    React Native Command Line Tools

    cnpm i -g react-native-cli
    // 官网文档的执行命令是  npm install -g yarn react-native-cli 
    //  我这不平时都用cnpm安装依赖,于是乎我  没有选择安装 yarn  
     // 不信邪你就像我这么干,后面一准安装依赖这样失败,那样失败( ̄_, ̄ )
    

    创建项目

    react-native init ProjectName
    

    没安装 yarn 结果初始化项目的时候卡住了,
    提示‘Consider installing yarn to make this faster: https://yarnpkg.com’ .
    所以… 再试试连外网然后初始化项目…, 貌似还是卡住,依赖装不完,( ̄_, ̄ )
    难不成 react-native-cli 里指定了依赖安装工具是 yarn ?
    (安装完yarn后初始化项目很顺利,所以不要抗拒,乖乖听官方文档的话,把yarn安装上!!!!)

    安装yarn

    cnpm i -g yarn 
    

    配置淘宝镜像

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

    创建项目

    react-native init ProjectName
    

    rn项目初始化成功
    n项目初始化成功

    跑起来

    react-native run-android
    

    模拟器下异常报错记录

    1、 Task :app:installDebug FAILED

    解决: 自己试了下,去模拟器里把之前安装的 测试应用给卸载掉,居然管用了 ,哇哈哈

    RN调试

    百度相关博客时,看别人说reload,然而在模拟器的界面到处找reload都木有找到。Ctrl + M 快捷键…

    React Native调试技巧与心得
    可以通过 Ctrl + M 快捷键来快速打开Developer Menu , Reload按钮就在这个菜单里 !
    双击 键盘上 的 R键,也可以让模拟重新加载应用

    展开全文
  • RN入门-01-环境搭建

    千次阅读 2020-04-15 18:39:17
    创建首个RN项目(Android) 扩展 1.React-Native iOS 真机测试详细流程 2.解决XCode配置完appid后依然提示如下问题 3.解决安装cocoapods卡住问题 工具安装 1. Watchman Watchman由 Facebook...
  • RN入门---环境搭建和第一个RN项目

    万次阅读 2017-11-22 19:50:05
    一、RN环境搭建,参照RN中文网,有以下概念Chocolatey:Chocolatey是一个Windows上的包管理器,用于安装windows程序 Python 2: NodeJS:NodeJS是基于javascript的服务端。将本地的js文件(RN里,将返回的js...
  • windows搭建RN环境

    千次阅读 2016-09-23 10:01:19
    windows搭建RN环境今天主要任务尝试windos搭建RN环境步骤一安装Chocolatey官网:https://chocolatey.org/ 安装方法: 可以直接选择命令安装 或者打开文件夹本地C:\Windows\System32\WindowsPowerShell\v1.0\ ...
  • RN 环境搭建之Mac 下配置步骤(windows 下一样的道理): 1.安装必需的软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件(Mac 控制台)。 /usr/bin/ruby -e “$(curl -fsSL ...
  • RN环境搭建

    2017-09-14 20:09:47
    RN环境搭建及配置文档
  • RN 环境搭建

    2018-03-09 11:17:49
    * RN 环境搭建 cmd模式 * 1.创建 Chocolatey * @powershell -NoProfile -ExecutionPolicy Bypass -Command “iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1‘))” &...
  • RN环境中配置出现问题,crn 封装的rn 的信息,出现问题,通常会执行crn-cli run patch 去解决,但是发现实际使用过程中crn-cli 的命令找不到, 是node 的版本 不一致导致的, 解决方案!1、 删除原有nodebrew ...
  • RN环境搭建和原生交互
  • 关于RN Android项目实际学习中收集的的一些参考链接: 1.Windows下使用AndroidStudio+ReactNative开发Android应用 ... 2.原生An...
  • RN环境搭建中的问题

    2020-05-21 19:33:01
    ==> Installing dependencies for ffmpeg: nasm, pkg-config, gettext, texi2html, lame, libogg, libvorbis, libvpx, opus, sdl2, snappy, theora, x264, x265...==> Installing ffmpeg dependency: nasm ==>...
  • (一)RN环境搭建       ...
  • 首先附上官方环境搭建文档地址:https://reactnative.cn/docs/0.51/getting-started.html#content 本人在按照其步骤安装的过程过卡在了brew install node这一步,按照其提示更换成brew link仍然报错 首先尝试...
  • 首先安装官网的装好依赖 这里特别敲掉的是 jdk 必须要1.8的才行: 装了node 就不要 py...这里的我最大的坑就是 虚拟机启动时候,老是报错,检查jdk,还有环境配置,配合报错! 倒腾了一下午,也是服了 模拟 不推荐...
  • Windows下RN环境搭建及官方Demo运行

    千次阅读 2017-08-02 15:07:22
    Windows下RN环境搭建及官方Demo运行
  • android RN开发环境搭建

    千次阅读 2019-01-25 11:47:46
    今天,简单讲讲Android React Native开发环境搭建。   首先讲讲什么是React Native开发(RN开发)? React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 ...
1 2 3 4 5 ... 20
收藏数 3,283
精华内容 1,313
关键字:

rn环境搭建