美文网首页
RN 创建项目、运行项目踩坑分享

RN 创建项目、运行项目踩坑分享

作者: LYPC_下里巴人 | 来源:发表于2019-06-21 13:51 被阅读0次

这个文章主要是创建项目和启动服务、运行项目过程中遇到的问题,记不太全了 以后还有问题会再进来更新 共勉
项目跑起来之后开始做项目 祝开发过程顺利 继续分享

创建项目

 创建项目(默认最新版本)
$react-native init ZhangFeiE
创建项目指定版本
$react-native init ZhangFeiE --version 0.44.3

在项目文件夹下开启服务

$react-native start 

直接打开iOS里面的项目使用Xcode 运行的时候 也能自动弹出启动
这一步操作是打开一个用于实现动态代码加载的 Node 服务(React Packager)。所以每当你修改代码,你只需要在模拟器中按下⌘+R,而无需重新在 XCode 中编译

问题一
卡在 Loading dependency graph...
因为服务器没顺利开启,造成app连接不到服务器,所以服务器和app都一直在加载中
验证是否服务器通着:在浏览器打开这个链接 能打开就没问题
192.168.1.101是你的本机ip:
http://192.168.1.101:8081/index.js?platform=android
http://192.168.1.101:8081/index.js?platform=ios
启动服务成功的时候展示这个:
Loading dependency graph, done.
还有可能就是端口占用的问题 自己看看然后杀死了再重新开启服务吧
查看端口占用情况:
lsof -i tcp:8081

生成:main.jsbundle

使用Xcode打开项目是会看到main.jsbundle报红,这个是打包的时候用 你看着不好看 就创建一下吧:

$curl [http://192.168.1.101:8081/index.js](http://192.168.1.101:8081/index.js) -o main.jsbundle

运行RN项目:

$cd 项目目录
运行iOS版
$react-native run-ios
运行指定的设备
$react-native run-ios --simulator "iPhone 8"
来查看具体可用的设备名称
$xcrun simctl list devices
运行到安卓版
$react-native run-android

查看本地的****React Native****的版本

$cd 项目里面
$react-native --version

新下载的项目缺失文件 运行这个:

$npm install
引入指定的库依赖:
$npm install react-native-side-menu --save

问题一
如果错的话 用下面的这个:
如果开启服务的窗口多了 关掉启动服务的一个终端窗口 重新$npm install

更新本地的****React Native****的版本
$npm update -g react-native-cli
升级或者降级****npm****包的版本
$npm install --save react-native@0.18

报错总结:
打开Xcode使用iOS的模拟器运行报错

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Could not connect to development server.
Ensure the following:

- Node server is running and available on the same network - run 'npm start' from react-native root

- Node server URL is correctly set in AppDelegate

- WiFi is enabled and connected to the same network as the Node Server

URL: http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false The operation couldn’t be completed. (NSURLErrorDomain error -999.))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.228

 RCTCxxBridge.mm:414

___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118

-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]

__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke

__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__

-[NSBlockOperation main]

-[__NSOperationInternal _start:]

__NSOQSchedule_f

_dispatch_call_block_and_release

_dispatch_client_callout

_dispatch_continuation_pop

_dispatch_async_redirect_invoke

_dispatch_root_queue_drain

_dispatch_worker_thread2

_pthread_wqthread

start_wqthread

解决办法:检查开启ATS 打开iOS的部分 里面的info.plist添加:App Transport Security Settings (现在新建的自身就带了)

启动服务报错:

Looking for JS files in
 /Users/LYPC/Documents/电小二项目/RNAPP/ZhangFeiE 
Loading dependency graph...::ffff:172.20.10.6 - - [19/Jun/2019:17:22:48 +0000] "GET /favicon.ico HTTP/1.1" 404 150 "http://172.20.10.6:8081/index.js?platform=ios" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15"

2019-06-20T01:30:45,086: [cli] failed to identify PDU: fill_buffer: EOF

2019-06-20T01:30:45,088: [cli] unable to talk to your watchman on /usr/local/var/run/watchman/LYPC-state/sock! (Undefined error: 0)

Watchman: watchman --no-pretty get-sockname returned with exit code=1, signal=null, stderr= 2019-06-20T01:30:45,086: [cli] failed to identify PDU: fill_buffer: EOF

2019-06-20T01:30:45,088: [cli] unable to talk to your watchman on /usr/local/var/run/watchman/LYPC-state/sock! (Undefined error: 0)

解决方法 重新安装了一下相关的工具(我的电脑之所以出这些各种问题吧,我是不奇怪的 天天瞎倒腾的把电脑整的面目全非了 有心理准备):

终端:
$/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 
用Homebrew来安装 Node 和 Watchman, 之前确实安装过 最好根据提示reinstall一遍
$brew install node
$brew install watchman
设置:
$npm config set registry https://registry.npm.taobao.org --global
$npm config set disturl https://npm.taobao.org/dist --global

中间重新安装watchman的时候  需要网.bash_profile里面添加点内容  根据提示来  没提示的话就不要管了,所以自己好好看看执行这些命令之后的提示!!!
我的需要添加  这里附上往.bash_profile添加内容的操作步骤,之前的文章也提到过:  首先文件位置:
~/.bash_profile
使用vim建议 别的方式也行看习惯:
$vim ~/.bash_profile
$i
贴入需要的内容
esc键结束编辑
$:wq
使变更生效:
source .bash_profile

运行react-native run-android报错:

之前我倒腾过一写安卓,装的模拟器估计坏了 现在报一顿这些错误跑不起来 建议翻墙执行 我翻墙了也不行 没成功,等我啥时候闲的想解决这个 再来更新

LYPC:ZhangFeiE LYPC$ react-native run-android

**info** JS server already running.

**info** Building and installing the app on the device (cd android && ./gradlew app:installDebug)...

**<----<====<====**

FAILURE: Build failed with an exception.

* What went wrong:

A problem occurred configuring project ':app'.

> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '/Users/LYPC/Documents/电小二项目/RNAPP/ZhangFeiE/android/local.properties'.

* Try:

Run with **--stacktrace** option to get the stack trace. Run with **--info** or **--debug** option to get more log output. Run with **--scan** to get full insights.

* Get more help at **https://help.gradle.org**

**BUILD FAILED** in 21s

**error** Could not install the app on the device, read the error above for details.

Make sure you have an Android emulator running or a device connected and have

set up your Android development environment:

https://facebook.github.io/react-native/docs/getting-started.html

**error** Command failed: ./gradlew app:installDebug. Run CLI with --verbose flag for more details.

LYPC:ZhangFeiE LYPC$

相关文章

  • RN 创建项目、运行项目踩坑分享

    这个文章主要是创建项目和启动服务、运行项目过程中遇到的问题,记不太全了 以后还有问题会再进来更新 共勉项目跑起来之...

  • 记录创建RN项目踩过的坑

    首先,跟着官网的步骤安装react-native-cli 使用以下命令创建项目 react-native init...

  • iOS原生项目集成RN项目

    1、首先在原生项目下创建一个RN项目,或者已经完成的RN项目拖入工程项目下。(如下图) 2、创建RN项目 npx ...

  • 前言

    做RN项目已经快做完了,做RN项目别提多痛苦了,现在我就可以大胆的说一句,我RN踩过的坑比你走的路还多。特别要感谢...

  • RN(0.67)接入现有swift项目及常见问题

    一、创建RN新项目 1、创建新项目在安装好RN环境之后,执行如下命令 找到项目的ios目录,将现有的swift项目...

  • 使用Xcode运行reactnative程序、打包发布

    模拟器运行 在前面搭建RN开发环境的时候,我已经说过如何创建一个RN项目了。在创建好的项目根目录就分别会有一个An...

  • 运行rn项目

    $ npm i$ sudo gem install cocoapods$cd ios$ pod install$c...

  • 2018搭建react-native项目踩坑记录

    公司项目本来一直用的ionic,这次想试一下RN,就来踩坑了,现在项目还没全部写完,问题不少= =,有新的继续更新...

  • 创建RN项目

    在终端执行命令:react-native init 你的工程名 ,这行命令是创建RN工程,经过一些时间的等待,工程...

  • 组件化踩坑总结

     经历了项目组件化(准备工作)项目组件化(一)创建本地私有库项目组件化(二)创建远程私有库这些天也踩了不少的坑出来...

网友评论

      本文标题:RN 创建项目、运行项目踩坑分享

      本文链接:https://www.haomeiwen.com/subject/fhjyqctx.html