美文网首页
【ReactNative】入门随笔

【ReactNative】入门随笔

作者: IUVO | 来源:发表于2018-05-07 09:22 被阅读48次
  • 官方初始化项目方法:
    1、脚手架:create-react-native-app直接创建项目,创建完后,会在终端显示一个二维码,手机上安装EXPO,且处于同一网络,即可直接运行。
    优点:便捷,不需要配置本地环境,入口文件整合到App.js文件中
    缺点:由于使用Create React Native App创建项目时不会生成任何本机代码,因此无法在Expo客户端应用程序中提供的React Native API和组件之外添加自定义本机模块。(解决方法:npm run eject
    2、安装完整的环境后,使用react-native init #ProjectName#的方式,参照此处
    优点:一个完整的项目架构,可以直接操作。
    缺点:前期安装配置环境很麻烦,分两个入口文件index.ios.jsindex.android.js,看着懵逼。

  • 使用方式:
    1、运行react-native run-iosreact-native run-android
    2、刷新,安卓模拟器下双击R键,iOS模拟器下command+R
    3、调出菜单:安卓模拟器右侧菜单按钮,iOS模拟器下command+D
    4、打开调试终端,调出菜单后,点击选项Debug JS remotely,浏览器会打开一个页面,按command+option+J即可开始调试。

  • XCode持续打印错误:nw_connection_get_connected_socket 6 Connection has no connected handler
    导致原因:未知

    处理方法:见下图 处理方法
  • iOS真机运行调试
    如果你需要在真机上启用调试功能,则需要打开RCTWebSocketExecutor.m文件,然后将其中的"localhost"改为你的电脑的IP地址,最后启用开发者菜单中的"Debug JS Remotely"选项。
    文件路径:/Libraries/RCTWebSocket.xcodeproj/RCTWebSocketExecutor.m

  • 安卓真机运行AS报错但是真机照常启动
    如果遇到这个问题,看报错,一般是Error: Activity class {com.myapp/com.myapp.MainActivity} does not exist.这个问题,处理方法就是打开/android/app/build.gradle,修改:

defaultConfig {
        applicationId "com.myapp"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

项目初始是没注释掉的,我注释掉applicationId,但是一次有用,下一次再运行,又报同样错误,每次运行前动一下这个文件,就能正常,原因天知道。
但是要注意,如果是一直注释和取消注释,能正常运行,但是不会安装包,会一直运行之前的代码,就算你改了代码,也还是按之前安装的包去运行,需要报一次错(报错就是因为安装的时候引起的),然后再执行一次修改build.gradle的操作,这样你的新代码才能运行。
非常迫切需要知道怎么解决这问题,查了很多资料,都不顶用。

  • 安卓真机运行已开服务但是白屏的或者报错的
    留意有没有加上这一步:运行adb reverse tcp:8081 tcp:8081命令

备忘:关于如何安卓真机调试:打开开发者选项,打开USB调试,需要service的话,需要在每次重新安装包后,到辅助功能里打开对应服务。

相关文章

  • 【ReactNative】入门随笔

    官方初始化项目方法:1、脚手架:create-react-native-app直接创建项目,创建完后,会在终端显示...

  • 慕课视频

    免费 《Web安全-XSS》《ReactNative基础与入门》《React入门》《在React中使用Redux数...

  • Android & iOS 双端

    React Native 入门Doc https://reactnative.cn/docs/next/getti...

  • ReactNative入门

    官网 和 中文网 你将学到如下知识点:1、如何安装React 和一些包。2、如果创建一个工程。3、react ...

  • ReactNative入门

    1. 创建项目 react-native init HelloWord --version 0.43.4 2. 修...

  • ReactNative入门

    在index.ios.js文件中注册并导入组件WeatherProject 在WeatherProject组件中设...

  • ReactNative入门

    ReactNative 入门 1.环境搭建(Mac) HomebrewHomebrew, Mac系统的包管理器,用...

  • ReactNative入门

    目前主流应用程序大体分为三类:Native App, Web App, Hybrid App. 三者各有利弊,具体...

  • ReactNative入门

    因公司业务需要,近半年都在着手开发reactNative应用,在此记录下学习路径,希望对想入门reactNativ...

  • ReactNative 入门

    最近公司有移动端Android 的项目, 使用的技术栈是 ReactNative, 准备学习一下, 了解一下技术栈...

网友评论

      本文标题:【ReactNative】入门随笔

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