React Native 脚手架的基本使用详解

构建项目

在相应的路径下执行命令行：react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)

react-native --v //查看版本
react-native init demo --version 0.48.0//安装指定的版本
react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的，安装什么模块以及进度
npm view react-native versions //可以查看react-native所有的版本信息

跳转到对应路径下执行相应的移动端项目：

cd 项目名
react-native run-ios or react-native run-android

如果正常，运行效果如下：

RN调试技巧

Developer Menu

Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。

在模拟器上开启Developer Menu Android模拟器：

可以通过Command⌘ + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。

iOS模拟器：

可以通过Command⌘ + D快捷键来快速打开Developer Menu。

Reload

刷新页面，其快捷键是 command + R。

注意：只有修改 JavaScript 文件时，刷新功能才起作用。如果新增了文件或者修改了 Native 代码，就需要使用 Xcode 重新编译应用了。

Debug JS Remotely

该功能允许开发人员在 Chrome 中调试应用，其调试方式和调试 Web 应用一样。

change bundle location

改变打包后的地址

toggle inspector

在模拟器中查看组件样式。不怎么好用。

disable fast refresh

禁止快速刷新

Show Perf Monitor

该功能启用后会显示一个监控窗口，显示出实时的内存占用、UI 和 JavaScript 的 FPS 等信息。帮助我们调试性能问题。

Errors and Warnings

在development模式下，js部分的Errors 和 Warnings会直接打印在手机或模拟器屏幕上，以红屏和黄屏展示。。

Errors

React Native程序运行时出现的Errors会被直接显示在屏幕上，以红色的背景显示，并会打印出错误信息。 你也可以通过console.error()来手动触发Errors。

Warnings

React Native程序运行时出现的Warnings也会被直接显示在屏幕上，以黄色的背景显示，并会打印出警告信息。 你也可以通过console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示，或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning

Chrome Developer Tools

第一步：启动远程调试

在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。

第二步：打开Chrome开发者工具

在该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。

断点调试 当发生一些"莫名奇妙"的问题错误,常用解决方案

这里的莫名其妙是指，在上一刻代码还可以正常运行，在没有修改的情况下爆红：

1.刷新 ！ 刷新！ 刷新！

2.重新使用react-native run-xxx命令启动App

3.删掉App程序，关掉本地服务器，清除本地缓存

yarn:清空缓存

yarn cache clean

npm:清空缓存

npm cache clean -f

到此这篇关于React Native 脚手架的基本使用的文章就介绍到这了,更多相关React Native 脚手架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React-Native 组件之 Modal的使用详解

    React-Native 组件之 Modal的使用详解

    Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果. 属性 Modal提供的属性有: animationType(动画类型) PropTypes.oneOf(['none', 'slide', 'fade'] none:没有动画 slide:从底部滑入 fade:淡入视野 onRequestClose(被销毁时会调用此函数) 在 'Android' 平台,必需调用此函数 onShow(模态显示的时

  • react-native使用react-navigation进行页面跳转导航的示例

    react-native使用react-navigation进行页面跳转导航的示例

    首先要确认已经配置好react-native的环境. # 创建一个native应用,SimpleApp,然后进入项目目录 react-native init SimpleApp cd SimpleApp # 通过npm安装最新版本的react-navigation npm install --save react-navigation # 运行程序 react-native run-android 引入Stack Navigator 对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个

  • ReactNative 之FlatList使用及踩坑封装总结

    在RN中FlatList是一个高性能的列表组件,它是ListView组件的升级版,性能方面有了很大的提升,当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView,更不要使用ScrollView.既然说到FlatList,那就先温习一下它支持的功能. 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. 支持上拉加载. 支持跳转到指定行(ScrollToIndex). 今

  • React Native react-navigation 导航使用详解

    React Native react-navigation 导航使用详解

    一.开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目.在短短不到3个月的时间,github上星数已达4000+.Fb推荐使用库,并且在React Native当前最新版本0.44中将Navigator删除.react-navigation据称有原生般的性能体验效果.可能会成为未来React Native导航组件的主流军.本篇内容基于[ ^1.0.0-beta.9 ]版本来介绍关于该库的使用和实战技巧.可以看到,虽然是beta版本,不过基本稳定,大家可放心在项目中使用.

  • react-native fetch的具体使用方法

    react-native fetch的具体使用方法

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的Ionic 和React Native,都可以使用 fetch 进行完美的网络请求. f

  • ReactNative Image组件使用详解

    ReactNative Image组件使用详解

    最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文档对比下,会让你大跌眼镜.所以奉劝各位想学习ReactNative的同学,选择学习资料一定要以官方文档和官方demo为准,其他资料为辅. Image组件 在ReactNative中Image是用于显示图片的组件,和开发Android的时候ImageView控件相同的效果.它可以用来显示网络图片.静态

  • 详解React native全局变量的使用(跨组件的通信)

    RN中有两种方式使用全局变量 1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; export default object; 需要用到的时候导入文件 import constants from './constansts.js' <Text>{constants.name}</Text> 还可以有另外一种导入文件的写法 export def

  • React Native 脚手架的基本使用详解

    React Native 脚手架的基本使用详解

    构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度 npm view

  • React Native系列之Recyclerlistview使用详解

    React Native系列之Recyclerlistview使用详解

    目录 recyclerlistview的介绍与使用 1.安装 2.概述和功能 3. RecyclerListView的使用 1.dataProvider 2.LayoutProvider 3.rowRenderer 4.onEndReached 5.onEndReachedThreshold 6.extendedState 7.scrollViewProps RecyclerListView所有属性 recyclerlistview的介绍与使用 1.安装 npm install --save r

  • React Context源码实现原理详解

    React Context源码实现原理详解

    目录 什么是 Context Context 使用示例 createContext Context 的设计非常特别 useContext useContext 相关源码 debugger 查看调用栈 什么是 Context 目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api.大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux). 想想项目中是不是经常会用到 @connect(...)(Comp) 以及 <Pro

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

  • 利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

  • react国际化化插件react-i18n-auto使用详解

    react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下 安装 npm install react-i18n-auto --save-dev 第一步:添加babel插件配置(.babelrc添加方式) { "plugins": [ "@babel/plugin-transform-runtime", "react-i18n-auto", "..." ] } 第二步:添加自动化配置 i18n.

  • vue脚手架项目创建步骤详解

    vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr

  • react.js框架Redux基础案例详解

    react.js框架Redux基础案例详解

    react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/

随机推荐