zoukankan      html  css  js  c++  java
  • 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启动模拟机的时候,报错如下:

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

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

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

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

    android运行问题

    要是还是不行的话,就如下操作尝试:

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

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

    1. 清晰的守望者手表:watchman watch-del-all。
    2. 删除node_modules文件夹:rm -rf node_modules && npm install。
    3. 重置Metro Bundler缓存:rm -rf /tmp/metro-bundler-cache-*或npm start -- --reset-cache。
    4. 删除急速缓存: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报错:

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

    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
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


  • 相关阅读:
    python 打印对象的所有属性值
    selenium+python测试
    java连接3种数据库 JdbcLinkDB --201801
    又来折腾--正则表达式
    Excel 将A表的基础数据拼接到B表中来-三种方法: ctrl+回车, VLOOKUP()函数,宏
    Excel如何快速统计一列中相同数值出现的个数--数据透视表
    Jmeter、Postman 、 loadrunner SoapUI 接口测试工具
    delphi 获取时间戳 如何得到 和 js 中 new Date().getTime();的 相同?
    IIS部署项目
    C#使用log4net记录日志
  • 原文地址:https://www.cnblogs.com/sundaysme/p/12433206.html
Copyright © 2011-2022 走看看