react native
勤劳@小蚂蚁
前端路上,用心编写、分享每篇前端技术文章....
展开
-
React native 收起键盘
// 引入import { Keyboard} from 'react-native';// 在需要隐藏键盘的方法中,加入如下代码即可实现键盘隐藏Keyboard.dismiss();原创 2021-07-13 11:55:49 · 787 阅读 · 0 评论 -
React Native 连续点击两次返回键,退出APP
在app.js中添加如下代码即可:import { Platform, BackHandler, ToastAndroid} from 'react-native';const lastBackPressed = Date.now();export default class App extends Component { .... .... .... componentWillMount() { if (Platform.OS === 'andro原创 2021-07-13 08:41:23 · 419 阅读 · 0 评论 -
React Native AsyncStorage 实现 APP 登录后,杀死APP进程后,不用再次登录
这两天体验已上线的APP发现,不管APP是否是登录状态,只要杀死APP的进行,就必须重新登录。再体验一下淘宝APP,完全不需要登录。于是乎,便请教了下百度老师,经过一番折腾,我的APP也有此功能啦。故分享出来,供大家参考和指导一、用AsyncStorage存储登录后的用户信息login = () => { const { loginName, loginPassword } = this.state; if (!loginName) { Toast.message('原创 2021-07-13 08:33:17 · 879 阅读 · 2 评论 -
React-Native 环形进度条组件 react-native-circular-progress
先上效果图实现在RN中,要实现环形进度条效果,一般都是需要借助chart图实现;最近做RN项目,经过折腾,发现react-native-circular-progress这个组件几乎能完美的解决。故分享出来,废话不多说了,直接上代码1、react-native-circular-progress组件Circle.js的封装import React, { PureComponent } from 'react';import {StyleSheet, View, Dimensions} from原创 2020-12-17 15:42:09 · 2209 阅读 · 0 评论 -
使用react-native-video播放直播视频流
最近做RN项目,需要在APP端播放直播视频流,对比过很多插件,最终选择了react-native-video,npm地址,然而在使用过程中,还是尝试了多次,才实现了播放直播流的功能。温馨提示:如果你的react-native版本是0.5之内的,那么建议使用react-native-video的3.2.1这个版本的npm包,否则会出现很多奇怪的报错,我也是经过多次尝试,最终总结出的经验文章目录一、安装react-native-video二、配置1. 配置android/app/build.gradle2原创 2020-12-04 10:21:34 · 4131 阅读 · 2 评论 -
Navigation.navigate页面跳转报错解决方案记录
react-native Navigation.navigate页面跳转报错:Undefined is not an Object(evaluating this2.props.navigation.navigate)…解决方案最近做RN项目,项目菜单是通过侧滑栏全局配置效果实现,但是在点击侧滑栏菜单项时,却始终报标题所示的错误提示,经过一系列网上查阅和实践,终于搞定,故记录下来调用侧滑栏组件时,传递navigate<SlideMenu navigate={this.props.navig原创 2020-11-30 14:01:54 · 1868 阅读 · 0 评论 -
RN 常用标签属性集合
文章目录一、文字省略号 numberOfLines二、图片大小控制 resizeMode该篇主要记录在react native开发中,标签常用的一些属性,会持续更新一、文字省略号 numberOfLinesnumberOfLines={number} 其中number表示超过多少行时显示省略号,如<Text numberOfLines={1} style={[styles.itemRightLetter]}> 在文字长度超过一行时,便显示省略号</Text>二原创 2020-09-11 16:28:46 · 1050 阅读 · 0 评论 -
native-echarts的使用
文章目录前言一、安装native-echarts二、使用步骤1. tpl.html的配置2. 修改source源,以便打包后chart图能正常显示3. 调用并显示chart图4. 效果图前言近期接到客户一需求,要在chart图上展示markLine标线,由于RN项目使用的chart图展示插件为:react-native-charts-wrapper,该插件没法实现此功能,只好另寻方案,试过使用webView实现此功能,但实际运行却经常白屏,故废弃,综合对比,选用了native-echarts来实现此功原创 2020-09-02 15:25:22 · 1920 阅读 · 0 评论