react-native安装

1.安装HomeBrew

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

或者

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

2.安装npm 和 Node.js
　　Node.js 网址：https://nodejs.org/en/download/
3.安装WatchMan
　　 brew install watchman
4.安装Flow
　　brew install flow

2安装android和xcode
android 
2.1安装jdk  2.2安装androidStudio 
2.3安装Genymotion 　　https://www.genymotion.com     需要安装 VirtualBox

安装React Native
3.1 安装React Native
　　npm install -g react-native-cli

4React Native 命令
4.1 创建一个工程
react-native init 项目名称
 如需替换npm仓库为国内镜像
　　npm config set registry https://registry.npm.taobao.org
　　npm config set disturl https://npm.taobao.org/dist

5.安装WebStrom 或vs
6.React Native库常用命令
6.1查看本地React Native版本
　　react-native --version

6.2更新本地React native版本
　　npm update -g react-native-cli
6.3查询react-native的npm包最新版本
npm包地址 　　https://www.npmjs.com/package/react-native
　　查询命令　　npm info react-native
6.4 升级或者降级npm包的版本
npm install --save react-native@版本号
6.5命令行查询　　react-native upgrade

7 WebStom设置React Native代码提示
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
将ReactNative.xml复制到 ~/library/Preferences/WebStorm10(当前目录下对应的webStorm)/templates
7.1 
　　cd ~/library/Preferences
　　open WebStorm
　　没有templates的话床架此目录放到文件夹下，为保险，在options目录夹下放一份ReactNative.xml

重启WebStrom

官方安装
https://reactnative.cn/docs/getting-started.html

测试安装

react-native init AwesomeProject

cd AwesomeProject

react-native run-ios

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

你也可以在Nuclide中打开AwesomeProject文件夹然后运行，或是双击ios/AwesomeProject.xcodeproj文件然后在 Xcode 中点击Run按钮。

修改项目

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

使用你喜欢的编辑器打开index.ios.js并随便改上几行。

在 iOS Emulator 中按下⌘-R就可以刷新 APP 并看到你的最新修改！

完成了！

//总端进入rn根文件路径

cd /Users/workmac/AwesomeProject

//总端方式启动模拟机运行

react-native run-ios

//模拟机启动失败配置模拟机

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

//设置默认模拟机机型

react-native run-ios --simulator "iPhone 6"

RN运行指定真机和模拟器

iOS

react-native run-ios --simulator "iPhone 7 Plus”
react-native run-ios --device "XXX"(xxx代表真机设备名字)
真机运行是可能会用到ios-deploy

查看当前可用的所有设备/模拟器列表：
xcrun simctl list devices

Android

查看当前可用的所有设备/模拟器列表：
adb devices

react-native run-android --deviceId xxx

例如

react-native run-android --deviceId emulator-5554
提示：(Android 5.0及以上)可以尝试使用adb reverse命令，运行adb reverse tcp:8081 tcp:8081，不需要更多配置，你就可以使用Reload JS和其它的开发选项了。

react-native android 运行命令

debug模式运行

sudo react-native run-android

release模式运行

sudo react-native run-android --variant=release

在设备安装release版本

cd android && sudo ./gradlew installRelease(注意：如果模拟器已经有debug版本需先手动删除才能成功安装)

编译打包apk

cd android && sudo ./gradlew assembleRelease(注意：第一次打包如果报错删除node_modules目录重新npm i)





第三方android模拟器运行
https://www.jianshu.com/p/4a72211831ef

react-native启动报错error Could not install the app on the device…解决方法

浆糊之家 2019-06-10 22:28 3,555 views 热度值

在react-native run-android启动模拟机的时候，报错如下：

BUILD FAILED in 5s

13 actionable tasks: 1 executed, 12 up-to-date

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.bat app:installDebug. Run CLI with --verbose flag for more detail

首先，确保你有一个运行android模拟器。要做到这一点，你运行adb devices，查看是否可以看到你的设备，出现如下图所示类似*** device就代表连接设备成功

react-native启动报错error Could not install the app on the device...解决方法

adb kill-server 关闭adb服务，然后在启动安卓机试一下，react-native run-android

android运行问题

要是还是不行的话，就如下操作尝试：

从项目中删除Android和iOS文件夹
运行'react-native eject'，这将重新添加平台
react-native run-android --deviceId emulator-5554 最后面是指定设备（adb devices =>设备列表：emulator-5554这个是动态的，你要根据你设备的来）

注意：在某些情况下，您可能必须执行以下操作：

清晰的守望者手表：watchman watch-del-all。
删除node_modules文件夹：rm -rf node_modules && npm install。
重置Metro Bundler缓存：rm -rf /tmp/metro-bundler-cache-*或npm start -- --reset-cache。
删除急速缓存：rm -rf /tmp/haste-map-react-native-packager-*。

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

https://www.jianshu.com/p/4449af295659

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

创建项目

 创建项目（默认最新版本）
$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报错：

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

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$

作者：LYPC_下里巴人
链接：https://www.jianshu.com/p/4449af295659
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

posted @ 2020-03-07 11:25 sundayswift 阅读(674) 评论(0) 编辑收藏举报

刷新页面返回顶部

sundayswift