运行react-native 项目_react-native的项目运行 - CSDN
  • react-native 运行项目

    2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上...

    打开cmd,找到项目所在位置,运行以下指令:

    1.npm install,安装项目依赖,有时可能需要翻墙,一般比较慢。

    2.react-native run-android  打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上安装,如果在手机安装,安装好后,进入程序,摇一摇手机,在弹出框上选择Dev settings,然后点击debugging,输入电脑的ip地址,要求手机与电脑处在同一wifi。

    3、react-native start,摇一摇手机,项目就开始在手机上运行了,可以点击弹框上的stop remote js debugging,在浏览器上会看到相应的信息,配合调试。

    作为一个新手,运行了我的第一个react-native项目,成功跑起来了,真是不容易,今天先写到这里,以后再更新。

    展开全文
  • 因为后边要做rn项目,所以需要搭建下环境,过程中遇到很多问题,特记录下来。 首先我是按照react-native中文网官方提供的教程进行进行安装的。 react-native 需要的依赖的环境:node, python2, jdk,react-native-...

    因为后边要做rn项目,所以需要搭建下环境,过程中遇到很多问题,特记录下来。
    首先我是按照react-native中文网官方提供的教程进行进行安装的。
    一、环境配置

    1. react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -version查看了下显示是1.8版本,就以为jdk默认也是1.8,但是在react-native run android时候出现:
    > java.lang.UnsupportedClassVersionError: com/android/build/gradle/AppPlugin : Unsupported major.minor version 52.0
    

    于是去环境变量配置中检查了下配置,发现jdk配置的是1.6版本,切换成1.8就可以了。

    1. 安装Android Studio
      教程显示必须安装的几项:

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

    安装官方提供的教程安装的(https://reactnative.cn/docs/getting-started.html)
    但是在创建项目并运行项目时候遇到了问题:

    Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration
    

    模拟器完全没法启动,于是百度解决方法:https://blog.csdn.net/ezconn/article/details/81907393
    这个过程中进入bios但是没有找到Intel Virtualization Technology,汗~~。最终查到了在在Advanced菜单下面的CPU里!不是在Main里面的!并且要双击CPU才能看到vt(联想台式机)。这个问题解决,模拟器可以打开了。

    3.于是开始react-native run-android运行项目,又出现了问题:
    在这里插入图片描述
    于是继续查资料,发现是由于没有运行server服务器导致的,于是先react-native start在react-native run-android,依旧报错,此时仔细看run-android的提示:

    D:\RN_learn\Test1> react-native run-android
    warn JS server not recognized, continuing with build...
    info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...
    

    JS server not recognized,也就是这个server根本没有启动成功,这是由于8081端口被占用了,于是需要更改端口:react-native start --port 8083,然后在react-native run-android --port 8083,此时提示:

    info JS server already running.
    info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...
    

    好了,js server终于启动起来了,但是还是显示:
    在这里插入图片描述
    这个时候有的手机会显示一片红色,这个时候,一般是服务端正在加载数据或者加载错误,解决办法就是点击下面中间的RELOAD重新加载,或者等一会儿。点了reload依然报错:
    在这里插入图片描述
    也是醉了,我都改成8083端口了,怎么模拟器还是8081端口。。。所以需要更改模拟器中端口,使用 adb shell input keyevent 82调出模拟器的设置:
    在这里插入图片描述
    进入dev setting,选择debug server host & port for device改成本机ip和8083端口:
    在这里插入图片描述
    最后终于看到了想看到的界面,当然,页面文字我已经改过了。。。大功告成。
    在这里插入图片描述

    二、调试

    1. adb shell input keyevent 82 打开开发者菜单,开启Enable Live Reload,界面会随着代码的变化自动刷新。
    2. 在开发者菜单中选择"Debug JS Remotely"选项,即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面,进入开发者模式即可以调试了。
    展开全文
  • AndroidStudio运行React-Native项目

    千次阅读 2018-08-21 14:53:12
    React Native简介和环境...今天来介绍如何使用AndroidStudio来运行React-Native项目; 1.AndroidStudio打开RN项目 AndroidStudio 打开或导入项目目录下的andriod目录即可; 2. AndroidStudio配置gradle、sdk、b...

    React Native简介和环境搭建 介绍了环境搭建,已经通过react-native run-android命令来运行项目;

    今天来介绍如何使用AndroidStudio来运行React-Native项目;

    1.AndroidStudio打开RN项目

    AndroidStudio 打开或导入项目目录下的andriod目录即可;

    2. AndroidStudio配置gradle、sdk、build-tools

    RN项目目前默认是gradle 2.2.3 ,sdk使用android 6.0(API 23),build-tools版本为23.0.1

    3. 打开React-native服务

    通过dos进入到项目目录,eg:F:\AndroidStudio\ReactNative\RNApp

    执行以下命令:

    react-native start

    显示结果:

    否则会出现错误:

     AndroidStuio运行RN项目:Could not connect to development server.: Exception in native call

    4. 运行项目

    运行项目显示结果:

     

    展开全文
  • mac搭建并运行react-native项目

    千次阅读 2019-07-23 15:22:10
    目录很简单介绍点啥下载开发工具和组件初始化项目在这个过程中就有坑了,注意启动项目-Android启动项目-iOS 介绍点啥 网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,...

    介绍点啥

    网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,很可能是有问题的;另一方面,对配置和运行中出现的问题没有详细介绍怎么解决(也可能是人家运气好,没有碰上)。
    我是第一次研究移动端应用的开发,完全不懂Android和iOS这一类的技术。react-native略懂思路,所以按照书上和网上的教程做下来,遇到好多问题。这里分享出来,给同样运气差的你一个方向。

    下载开发工具和组件

    • Homebrew得会啊,不会的话去看看吧
    • Android studio(非必须,只用sublime就能开发)
    • sublime 3
    • node.js
    • flow(非必须,js强校验工具)
    • watchman(文件变更监控,react-native可以实现热更新)
    • react-native-cli(命令行工具)
    • xcode(基本上在终端启不来iOS版本的话,只能用xcode来编译了)
    • cocoapods(iOS版本开发必须)
    • yarn(Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载)
    1. 安装node和watchman
    brew install node
    brew install watchman
    

    安装完node后要修改镜像地址,否则安装组件慢如牛,还不一定能装上

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    
    1. 安装yarn和react-native-cli
    npm install -g yarn react-native-cli
    

    安装完后也要修改镜像地址

    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global
    
    1. xcode在app store安装就行
    2. cocoapods比较坑,后面介绍安装

    初始化项目

    找一个你喜欢的角落,执行

    react-native init YouLikedProjectName
    

    完成后就会新建一个名为YouLikedProjectName的文件夹,里面有Android和iOS版本的项目源码以及各种依赖库文件

    在这个过程中就有坑了,注意

    1. 一些模块地址被墙,下载不到,就需要proxy了
      shadowsocks开启全局模式,并不代表terminal也可以走代理。另外,terminal只能设置http代理,无法走https;而且,ping命令是无法确认是否走代理了,只能用curl或wget来确认。同样,Android studio也需要手动设置代理,否则无法下载依赖的包。怎么样,坑多么?干的漂亮。
    1. 下载cocoapods慢的要死,几十分钟后还来一个失败
      直接ctrl+c中断,不用等了,执行下面的命令

      $ brew install cocoapods 
      $ cd ios
      $ pod install --repo-update
      

      懂了么,用brew来装cocoapods,然后到项目目录里更新。参考1 参考2

      如果中途遇到SDK “iphoneos” cannot be located这样的错误,参照来指定command路径,然后重新pod install --repo-update就搞定了。

    启动项目-Android

    1. 映射端口
    adb reverse tcp:8081 tcp:8081
    

    这样就可以把手机和电脑的8081端口映射在一起。

    1. 启动监听服务
    react-native start
    
    1. 运行项目
    react-native run-android
    

    如果遇到react-native No bundle URL,参考下面iOS的解决方案。

    启动项目-iOS

    • 注意一定先运行react-native start,启动监听服务。然后再运行react-native run-ios
    • 如果命令行启动失败,那就只能开xcode来编译了。注意,必须打开后缀名是xcworkspace的文件,如果只打开xcodeproj,编译可能会报错:Xcode build error linker command failed with exit code 1
    • 如果提示找不到一些头文件,比如:
    Error building: 'React/RCTBridgeDelegate.h' file not found; 'React/RCTBridge.h' file not found
    Exception: 'React/RCTLog.h' file not found
    

    那么去修改Header Search Paths,增加:
    $(SRCROOT)/Pods/Headers/Public
    $(SRCROOT)/…/node_modules/react-native/React

    注意,要选择递归查找。
    在这里插入图片描述

    • 启动成功后,模拟器开启,上传应用后,打开发现react-native No bundle URL present
      在这里插入图片描述
      检查两个地方:
    1. 是否执行过react-native start
    2. 是否开启了代理(需要关闭
      确认两个都没问题,在模拟器中删除应用,然后清理xcode编译后文件:Product——Clean Build Folder,再重新Build,看到如下界面,完美了。
      在这里插入图片描述
    展开全文
  • android studio直接运行react-native项目时报错 make sure you're either running a metro server(run 'react-native start') 解决办法: You haven't started the bundler yet. Runnpm startorreact-native ...
  • 小白尝新,第一次运行RN导出的源码,app.gradle中报错,异常显示找不到这两个文件, 作为第一次运行RN编译代码的...apply from: "../../node_modules/react-native/react.gradle" apply from: "../../node_modules/rea...
  • 运行react-native项目遇到的坑

    千次阅读 2018-08-01 15:33:54
    最近接手了一个react-native项目,用xcode运行的时候,各种坑,各种报错,现在抽时间整理一下 1.找不到头文件 RCTJPushModule.h 一上来就报这个错,翻阅一些资料找到解决办法 打开终端,cd到项目文件夹,输入 ...
  • 1. 运行在Android上: ... react-native run-android // 默认运行设备 react-native run-android --simulator="XXX" // 模拟器运行 react-native run-android --device="chenfan_mate20pro" // 真机(ch...
  • 运行React-Native项目

    2016-03-06 17:09:06
    首先需要配置好环境.集体配置安装Homebrew,Node.js,...2. react-native run-android (注意RN项目需要通过终端来开启,前提是npm install后)如果出现红屏或白屏,要设置android开发者IP配置(若mac进入不了adb命令,需配置ad
  • 注意:(1)npm 安装react-native 有时候安装出现异常,可以将react-native 重新安装下再创建项目 npm install react-native (2)react-native安装异常,使用yarn cache clean 清除缓存 2.进入项目目录 输入 re...
  • 在初始化创建项目并通过yarn add react-navigation和yarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,...
  • 在创建好React-native的初始化项目后,运行yarn ios之后只是显示如下图 在虚拟机上没有任何的显示,这个其实...启动程序,就会运行react-native项目,切记,这些命令的运行一定是要在项目的目录下。 运行完了如下
  • 作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发其实我对react-native这新玩意懂得不多,只知道它很强大,可以实现跨平台运行啦~所以得抓紧时间布置开发环境来学习...
  • react-native 0.58 版本,运行 react-native run-ios 需要的第三方依赖包 缺少该资源包会导致 ":CFBundleIdentifier", Does Not Exist 错误 下载资源后解压缩到 ~/.rncache目录下面即可
  • 1。点击“Edit Configurations...” 2。点击“+”选择“npm” 3。“Name”随便输入一个名称,“Command”改为“help”,然后在点击“+”号。... “Program”为React-Native 命令安装路径,可用 where r...
  • React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发...
  • 以下是报错,不过他已经给了解决办法,报错提示的大概中文译为“无法加载脚本,请确保你的Metro服务以及那个包正确”...于是我跑到项目根目录下运行 react-native start, ok,看样子启动了服务,随后我重新运行项目...
  • 最新版本的react-native中,官方表示将要移除 AsyncStorage,推荐使用@react-native-community/async-storage,好吧官方经常这么干 按照官方提示 yarn add@react-native-community/async-storage react-native...
  • expo搭建react-native项目

    千次阅读 2018-12-03 11:15:41
    react-native官网中推荐开发使用expo去开发和真机启动项目。 在项目中可以使用expo的脚手架expo-cli去搭建,也可以使用create-react-native-app 脚手架去搭建。博客中使用的后者。前者可以参考官网 Get Started 全局...
  • 最近在写react-native项目,在项目部署过程中,执行npx react-native run-android命令,node会一直停滞在Loading dependency graph, done.上,所以不能及时更新 造成这个问题的原因是react-native的默认端口8081被...
1 2 3 4 5 ... 20
收藏数 18,144
精华内容 7,257
关键字:

运行react-native 项目