
React-Native
文章平均质量分 68
贺知叶
人不疯狂枉少年
展开
-
react-native项目上线国内安卓应用市场
用户隐私协议审核国内Android端上线应用是需要在进入程序时弹出一个表述该程序的《隐私政策》和《用户协议》以符合工信部政策。原创 2023-09-18 16:14:36 · 807 阅读 · 1 评论 -
React-Navigation架构嵌套路由:
React-Navigation ^5x架构嵌套路由:react-native使用的版本是^0.64,导航用的5x。目前已经出到了6x,不过也相差不大。目录React-Navigation ^5x架构嵌套路由:前言一、React-Navigation包引用二、import { NavigationContainer } from '@react-navigation/native'1.注册主路由容器 NavigationContainer2.App.js / index.js三、import { c原创 2021-12-21 10:07:39 · 1760 阅读 · 0 评论 -
React-Native新架构:
React-Native新架构:ReactNative宣布在2018年宣布对架构进行重要调整,此时正式Flutter面世。(2018.2.27-世界移动大会发布Fluuter)。而React-Native是在2015发布。以下是重构前的React-Native运行方式:如图所示,RN结构四大核心部分:React代码部分,由代码翻译过来的JavaScript部分,一系列统称为“桥”的部分,以及原生部分。当前架构一个关键点是:两个端——JavaScript端和Native端,是互相都不了解对方的情况原创 2021-12-15 15:43:34 · 1364 阅读 · 0 评论 -
React-Native : ‘^0.64.0’ 项目架构
项目场景:这里介绍一下我自己从0-1的React-Native项目架构,细粒化的程度还行,主要我喜欢深度细粒化的项目,写起来很舒服。package.json:"dependencies": { "@react-native-async-storage/async-storage": "^1.15.5", "@react-native-community/masked-view": "^0.1.10", "@react-navigation/bottom-tabs": "^5.原创 2021-12-15 15:37:47 · 2303 阅读 · 0 评论 -
react-native禁止系统设置字体大小
项目场景:App标准规范之一就是要适配屏幕大小,使用户体验良好,防止UI尺寸变形给用户带来不好的体验是最高的标准。用户字体看不清或者误修改了字体大小之后进入我们App必然会发现屏幕内某些字体大小发生异常,冲出当前轮廓的范围之外并且与"UI设计师"提供的设计文档显示相反,这并不是我们想要实现的效果。问题描述:1、设置系统字体大小导致UI混乱2、用户体验极其不良好3、与UI设计文档实现效果相反 解决方案:import { TextInput, Text } from 'react-nati原创 2021-07-12 09:55:52 · 741 阅读 · 0 评论 -
React Native Large List V3高性能列表组件-踩坑记录
项目场景:要求在手机端实现类似于web端的表格UI功能,想到可以使用该组件。原生桥接实现的一组高性能弹性大列表组件,支持超大数据源,高度重用,极大地优化了性能,滑动更跟手,完全可以媲美原生列表。CPU和内存占用比官方的SectionList明显少很多。当前使用版本:“react”: “17.0.1”,“react-native”: “0.64.0”,“react-native-largelist-v3”: “^3.0.15”,“react-native-spring-scrollview”:原创 2021-04-13 16:38:59 · 1553 阅读 · 0 评论 -
使用native-echarts图表绘制组件-记录踩坑
项目场景:获取后台的数组数据结构,并根据项目需求绘制图形态势页面,将使用到第三方组件 ‘Native-Echarts’一、版本:“react”: “17.0.1”,“react-native”: “0.64.0”,“native-echarts”: “^0.5.0”,“react-native-webview”: “^11.3.2”问题描述:1、报错Invariant Violation:WebView has been removed from React Native. It ca原创 2021-04-13 15:39:58 · 798 阅读 · 0 评论 -
如何在React Native中获得地理位置
如何在React Native中获得地理位置geolocation API扩展了geolocation的web规范。在android中,地理位置使用android.location. api。以下替代库用于在React Native中包含新的位置服务API。React-native-geolocation-serviceReact-native-location要请求位置访问,需要在应用程序的AndroidManifest.xml文件中包含以下代码。<uses-permission and原创 2021-02-24 15:15:32 · 677 阅读 · 0 评论 -
React-Native强制关闭软键盘
项目场景:NativeBase切换Tabs未关闭软键盘示例:UI界面使用NativeBase子组件Tabs,在Tabs中嵌入两个界面,Tab界面中拥有Input输入框效果问题描述:当我在Tabs中点击Input输入内容时切换去其他Tab是不会关闭Input输入框,并且输Input输入焦点依然在之前的输入框里面,所以我还是可以继续输入内容,这时BUG发生了。继续在上个输入框输入内容后会造成UI变形,界面显示焦点将会强制聚集到当前Input输入框界面。原因分析:由于使用NativeBase中原创 2021-01-22 18:47:53 · 2294 阅读 · 0 评论 -
React-Native环境搭建流程
React-Native环境搭建流程 React-Native:0.63,React:17.0对应系统对应不同环境:Mac->Xcode,Windows->AndroidStudio,RN->VSCode希望这篇文章对你的问题可以有效地解决。防止以后忘记环境安装流程,对你以后更换工作并且又要重新环境有用处。蟹蟹!文章目录React-Native环境搭建流程 React-Native:0.63,React:17.0前言一、基本步骤二、创建项目三、部分问题解决方案总结前言不多原创 2021-01-11 15:22:20 · 823 阅读 · 0 评论 -
解决抖音爱心动画实现
项目场景:项目场景:通过进入app首页显示一个满屏的视频列表功能,类似于抖音的效果问题描述:单次点击的时候切换暂停/播放状态,连续多次点击每次在点击位置出现一个爱心,随机旋转一个角度,爱心先放大再变透明消失。 原因分析:要求判断点击手势效果单次点击的时候切换暂停/播放状态连续多次点击每次在点击位置出现一个爱心并且随机旋转一个角度爱心先放大再变透明消失。解决方案://在相关页面引用即可 const [heartList, setHeartList] = React.u原创 2020-12-08 15:57:59 · 1299 阅读 · 0 评论 -
初探无状态组件管理器‘Hooks’
使用Hook状态管理前言一、Hooks是什么?二、使用步骤1.引入库2.读入数据总结1.使用Hook状态管理Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。文章目录前言一、Hooks是什么?二、使用步骤1.引入库2.读入数据总结前言我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能?React 早期版本,类组件可以通过继承PureComponent来优原创 2020-12-08 15:15:02 · 347 阅读 · 0 评论