React Native开发
文章平均质量分 61
记录开发React Native App中遇到的问题和解决方式,以及一些组件分享
-雾里-
凡是过往 ,皆为序章
展开
-
【React-Native】- 红米/安卓手机Text文字显示不全及全局字体
文章目录前言方案一:更换手机字体方案二:重新封装Text组件方案三:覆盖Text组件的render方法前言提示:这里可以添加本文要记录的大概内容:由于Android 手机厂商很多,不像 iPhone 只有一家公司,默认字体是不统一的。这时候如果组件没有设置字体,就会使用手机的默认字体。而有些字体,比如 “OnePlus Slate”、“小米兰亭pro” 在使用 Text 组件渲染的时候,就会出现被遮挡的问题提示:以下是本篇文章正文内容,下面案例可供参考方案一:更换手机字体方便快捷,但可控制原创 2022-05-23 17:04:58 · 2132 阅读 · 0 评论 -
【React-native】页面禁用右滑(物理)返回
文章目录前言一、BackHandler组件引入二、添加监听三、移除监听前言提示:这里可以添加本文要记录的大概内容:例如:使用app时我们会习惯性的使用自带的右滑返回到上一页面,但由于有时使用弹窗相关组件,右滑返回页面是返回到了上一页面,但是弹窗并没有关闭,因此需要对返回事件进行监听提示:以下是本篇文章正文内容,下面案例可供参考一、BackHandler组件引入import { BackHandler } from 'react-native';二、添加监听componentDidMou原创 2022-05-11 17:18:25 · 1768 阅读 · 0 评论 -
【React-Native】批量引入svg并导出脚本
文章目录前言一、新建一个js文件用于生成导出文件二、使用及其注意事项1.使用2.注意事项前言在Rn中无法直接引用svg图片,我们习惯用react-native-svg或react-native-svg-transformer来帮助我们使用svg图片。用法:import About from './svg/about.svg';<About width={10} height={10} />由于每个svg图片都需要引入,就会造成每个页面代码都是一大串的svg引入。因此想写一个文.原创 2021-11-04 20:30:54 · 490 阅读 · 0 评论 -
【React-Native】使用antv/f2折线图/饼图
最近在写一个RN-app项目,需要用到折线图和饼图,原本是使用第三方echarts,使用发现折线图无法在安卓机显示,饼图虽能显示,却不能更新数据,最终决定改用阿里的antv/f2可视化库。文章目录前言一、前提准备二、代码步骤1.新建f2chart.html2.charts.js加载js脚本3.renderChart.js4.使用效果图前言思路:使用react-native-webview加载本地html文件。提示:以下是本篇文章正文内容,下面案例可供参考一、前提准备安装react-na原创 2021-12-01 14:58:01 · 1528 阅读 · 0 评论 -
【React-native】 实现页面中间部分吸顶效果
在FlatList 和ScrollView 中有一个stickyHeaderIndices 可以轻松实现吸顶效果例如:<ScrollView showsVerticalScrollIndicator={false} style={styles.container} stickyHeaderIndices={[0]} />表示 ScrollView 的 第一个子元素 上滑时 吸顶...原创 2022-02-18 17:09:53 · 1908 阅读 · 2 评论 -
【React-native】WebView 高度和图片宽度自适应
import { WebView } from 'react-native-webview';this.state = { webViewHeight: 0}onWebViewMessage = (event) => { this.setState({ webViewHeight: Number(event.nativeEvent.data) });}<WebView style={{//外层用scrollView需在本身设置宽高原创 2022-02-15 11:05:12 · 1970 阅读 · 0 评论 -
【React-native】 实现分类左右菜单联动及不联动自定义
React-native类商城分类联动原创 2022-01-17 15:17:26 · 1536 阅读 · 0 评论 -
React-Native踩坑记录
一、项目运行时,node窗口闪退导致红屏报错二、图片的另一种引入方式三、报错Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.四、报错Transform's input file does not exist: D:\Projects\react-native\testNew\node_modules\react-native-reanimated\andr原创 2021-09-03 10:13:47 · 2047 阅读 · 0 评论