Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 28118|回复: 0

配置React Native环境及解决运行异常

[复制链接]
  • TA的每日心情
    奋斗
    2024-4-6 11:05
  • 签到天数: 748 天

    [LV.9]以坛为家II

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    705612
    发表于 2021-4-10 06:08:05 | 显示全部楼层 |阅读模式

    一. 安装Homebrew:

      Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki。

        brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默认安装了ruby":

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

        等待一段时间后会出现

        Press RETURN to continue or any other key to abort

        敲回车后提示输入你的电脑密码:(输入密码的过程中终端不会有任何变化)


     

        输入密码后提示

        Downloading and installing Homebrew...

        继续耐心等待..

    二. 安装Node.js:

        使用 Homebrew 来安装nvm,watchman 和 flow.(建议每次用Homebrew的时候先更新brew,命令:brew update )

     


     

        1,安装nvm:

        终端中输入:

        brew install nvm

        最后终端会提示


     

        大概意思就是如果没有.nvm文件的话就要创建一个,终端中输入

        mkdir ~/.nvm

        就可以创建.nvm文件了

        ,然后去~/.bash_profile或者在shell的配置文件中配置如下内容:

        export NVM_DIR=~/.nvm

        source $(brew --prefix nvm)/nvm.sh

     

        具体操作如下

     


     

        先进入home目录: cd ~

        打开.bash_profileopen文件:

        open .bash_profile

        如果文件不存在 就创建一个

        touch .bash_profile

       打开后把需要配置的内容复制进去然后保存退出


     

        现在NVM算是安装完成了.

    2.使用NVM安装node.js

        终端输入命令:

        nvm install node && nvm alias default node

        注:如果顺利安装完成可跳过下面步骤,直接进入第三步,进入安装watchman和flow环节.

       

        nvm 默认是从http://nodejs.org/dist/下载的, 国外服务器, 必然很慢,

        好在 NVM 以及支持从镜像服务器下载包, 于是我们可以方便地从七牛的 node dist 镜像下载:

        $ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install 0.11.11

        于是你就会看到一段非常快速进度条:

        ########################################################################         100.0%Nowusingnode v0.11.11

        如果你不想每次都输入环境变量NVM_NODEJS_ORG_MIRROR, 那么我建议你加入到.bashrc文件中:

        # nvmexportNVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/distsource~/git/nvm/nvm.sh

        接着终端输入命令:

        nvm install node && nvm alias default node

       如果使用NVM一直安装失败.可以尝试直接使用Homebrew安装node: brew install node

    三. 安装watchman和flow:

     

    终端输入

    brew install watchman

    brew install flow

    一切顺利

    建议定期运行brew update && brew upgrade来使您的应用程序保持最新状态。

    brew update && brew upgrade

     

    四. 初始化项目及解决运行异常

    初始化项目

    首先安装Xcode6.3或更高版本.

    完成后,终端执行

    npm install -g react-native-cli

    react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装react-native这个命令行,你只需要做一次即可。

    接着

    react-native init AwesomeProject

    这一条命令获取 React Native 的源代码和依赖包,然后在AwesomeProject/iOS/AwesomeProject.xcodeproj创建一个新的 Xcode 项目,并且在AwesomeProject/android/app下面创建一个 gradle 项目。这个命令初始化的项目在你的用户目录下.

    如果想初始化到桌面上需要 cd 到桌面 然后在执行 react-native init AwesomeProject 这个命令。

    打开项目的方式

    To run your app on iOS:
       cd /Users/BlueCity/Desktop/hello
       react-native run-ios
       - or -
       Open ios/hello.xcodeproj in Xcode
       Hit the Run button
    To run your app on Android:
       cd /Users/BlueCity/Desktop/hello
       Have an Android emulator running (quickest way to get started), or a device connected
       react-native run-android

     

    解决运行异常

    进入项目根目录后,使用 run-ios 指令启动该iOS APP:

    1. react-native run-ios 

    对于版本高于0.45的创建项目,也许你会看到如下错误:

    1. Error:   
    2. Build failed: 
    3. Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...  
    4. Print: Entry, ":CFBundleIdentifier", Does Not Exist 

    对应的直接点开.xcodeproj 运行相关的错误信息 

    1、降级版本方案

    本人经过多方查找,发现是创建项目下载安装node依赖模块时的资源缺失问题,目前最新的0.45及以上版本需要下载boost库,该库过大,导致下载出问题,参考:

    https://github.com/facebook/react-native/issues/14368

    https://github.com/facebook/react-native/issues/14447

    解决方案有两种,如果不追求新版本新特性,可以降低创建项目的版本,使用 --version 指令明确设置项目版本:

    1. react-native init MyApp --version 0.44.3 

    2、替换资源文件方案

    依然希望使用新版本的解决方案则是手动下载相关文件替换:

    下载如下四个相关文件放到项目根目录下的 .rncache 目录下,进行替换:

    React Native开发环境搭建

    下载地址: https://pan.baidu.com/s/1kV5iVzD.

    下载后替换:

    1. cd ~/.rncache 
    2. cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ 

    依次使用 cp 指令复制替换四个文件;

    然后删除第三方库文件,在 node_modules/react-native/third-party/ 目录下:

    1. rm -r project/node_modules/react-native/third-part 

    再次执行启动程序:

    1. react-native run-ios 

    发现可以正常运行了,接下来我们可以在编辑器里编辑我们的项目了,如我们的react-native入口js文件– index.ios.js 文件,刷新即可看到变更。

     

     

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-30 02:17 , Processed in 0.096097 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表