React Native
YooHoeh
热爱可抵岁月漫长
展开
-
React Native滚动到指定位置
在构建函数声明一个记录位置的值constructor(){ this.positionY = ''}既然要滚动,那肯定得将组件放在ScrollView里面啦<ScrollView ref={ref => this.scrollRef = ref}> <View onLayout={e=>{this.positionY = e.nativeEvent.la...原创 2020-03-16 00:26:05 · 1556 阅读 · 0 评论 -
三行代码让你的React/RN应用动起来
import { LayoutAnimation } from "react-native";componentWillUpdate() { LayoutAnimation.easeInEaseOut();}原创 2020-02-29 19:45:41 · 270 阅读 · 0 评论 -
React Native添加自定义全局组件
在开发rnApp的时候想自己封装一个自定义的Toast组件,又不想在每个组件文件内单独引用,于是自己琢磨了一个方法将组件添加到全局。这里举例封装一个自定义的Toast组件,这个文件可以放在自己的公共组件文件夹下ToastTip.js/* * @Date: 2020-02-26 17:40:34 * @Description: 自己封装Toast提示 * @Author: YooHo...原创 2020-02-28 18:29:26 · 2385 阅读 · 3 评论 -
MAC下网易MuMu模拟器调试ReactNative
疫情原因得在家远程办公,在MAC下开发RN的时候发现了一个平台兼容问题,手里头没有安卓设备,只能用模拟器,AS avd、genymotion笨重还慢,后来发现了网易mumu这个小东西,又小又快。自己捣鼓了一天终于在模拟器上运行上了,这里记录过程。调试前准备JAVA环境ADB环境(可以在终端运行adb命令)node环境下载并安装好网易MuMu模拟器1. 运行网易MuMu,打开后在...原创 2020-02-25 21:32:23 · 3938 阅读 · 2 评论 -
解决React Navigation goBack()无效
import { StackActions } from "react-navigation";const popAction = StackActions.pop({n: 1});this.props.navigation.dispatch(popAction);原创 2020-01-19 10:21:41 · 1186 阅读 · 0 评论 -
React Native适配安卓IOS刘海屏、异形屏方案
首先顶部引入这几个模块import { Platform, SafeAreaView, NativeModules, StatusBar} from "react-native";const { StatusBarManager } = NativeModules;获取状态栏高度let statusBarHeight; if (Platform.OS...原创 2020-01-16 18:18:26 · 4387 阅读 · 3 评论 -
ReactNative封装的优雅居中/底部弹出框
/* * @Date: 2019-08-30 16:05:37 * @Description: 真的不想每次都写个Modal了。 * @Author: zhangji * @LastEditors: ZhangJi * @LastEditTime: 2019-09-02 11:16:51 */import React from "react";import _ from "lod...原创 2019-09-03 14:13:55 · 1827 阅读 · 0 评论 -
React Native 给Image/ImageBackground添加圆角的几种方法
方法一<Image roundAsCircle={true} style={{borderRadius:5}} resource={require('xxx.png')} />方法二<Image imageStyle={{borderRadius:5}} resource={require('xxx.png')} />原创 2019-08-19 17:52:09 · 4054 阅读 · 0 评论 -
React Native页面props传Boolean值时遇到的问题
本文写的props传值为跨页面传props,组件嵌套时不会存在这个bug在RN中自建页面组件(必须是完整页面跳转,例如跳到日历选择页面之类的)时会用到需要传入一个bool值,当希望实现没有传对应的props值时给一个默认值,例如MyComponentPage.jsclass MyComponentPage extends React.component { constructor(pr...原创 2019-06-21 09:49:37 · 1225 阅读 · 0 评论 -
React Native升级目标SDK
React Native升级目标SDK打开在 android/app/的build.gradle 找到 android { } 区块改变以下属性compileSdkVersion 26buildToolsVersion "26.0.3"minSdkVersion 16targetSdkVersion 26找到dependencies区块, 改变appcompat为...原创 2018-07-23 09:45:00 · 1535 阅读 · 0 评论 -
react-native-background-job——让你的react-native项目实现后台运行
安排在您的应用处于后台时运行JavaScript的后台任务。即使应用程序已关闭,任务也会运行,默认情况下,也会在重新启动后继续存在。这个库依赖于React Native的HeadlessJS ,目前只支持Android。在本机端,它使用Firebase JobDispatcher或AlarmManager 。Firebase JobDispatcher(默认值):无法准确计划任务...原创 2018-07-24 11:49:53 · 8161 阅读 · 8 评论 -
React-Native-Storage使用介绍
react-native-storage这是一个本地持久存储的封装,可以同时支持react-native(AsyncStorage)和浏览器(localStorage)。ES6语法,promise异步读取,使用jest进行了完整的单元测试。安装npm install react-native-storage –save使用说明配置Web开发对于Web开发你需...转载 2018-07-23 23:58:12 · 5802 阅读 · 0 评论 -
轻松掌握Redux-Action使用方法
轻松掌握Redux-Action使用方法Redux-Action主要有两个方法,createAction和createAction,只要掌握了这两个方法就会了redux-action的使用。createAction原来创建action:const startAction = () =&gt; ({ type: START });使用redux-actions创建ac...原创 2018-07-23 21:36:10 · 4978 阅读 · 0 评论 -
React Native使用自定义组件添加顶部导航栏
源码/* * @Author: YooHoeh * @Date: 2018-07-11 21:25:31 * @Last Modified by: YooHoeh * @Last Modified time: 2018-07-12 08:37:32 */import React, { Component, PropTypes } from "react";import ...原创 2018-07-12 08:39:36 · 1804 阅读 · 0 评论 -
SwipeableFlatList 实现类似于QQ列表滑动
import React, { Component } from "react";import { FlatList, RefreshControl, StyleSheet, Text, View, ActivityIndicator, SwipeableFlatList, TouchableHighlight,} from "react-native";c...原创 2018-07-11 14:44:20 · 483 阅读 · 0 评论 -
React Native使用init新建项目出现异常
情况说明最近在使用使用react-native init之后没有生成app.js, index.js等文件,缺少了很多文件,如图: 原因因为近期rn更新,某些东西不适配,然后暂时能找到的方法就是指定较低版本的rn。解决方案使用react-native init YourApp --verbose --version 0.53.0进行init项目。...原创 2018-07-10 11:22:39 · 2439 阅读 · 2 评论 -
ReactNative 常见红屏黄屏及终端报错
刚开始接触RN,总是会遇到各种红屏黄屏报错,红屏是fatal error(程序无法正常运行),黄屏是Warming(非致命错误,程序可以运行但是存在潜在问题可能在某些情况下将导致fatal error)。我会在这里记录下我遇到的比较典型的问题,不定时更新,一方面方便别人参考学习,一方面也给自己做个记录归纳。The development server returned response error...原创 2018-05-12 10:01:09 · 5177 阅读 · 0 评论 -
Error watching file for changes: EMFILE
运行reactnative项目时在编译过程中报错Error watching file for changes: EMFILE故障原因:是升级后watchman不可用了,需要重装watchman。解决方案第一种解决方案是打开终端后依次键入以下命令:1.卸载原来安装的watchman:brew uninstall --force watchman2.删除原来的安装文件: rm -rf /usr/lo...原创 2018-05-21 15:24:34 · 641 阅读 · 0 评论 -
ReactNative用指定的真机/模拟器运行项目
使用模拟器运行项目: 命令行中React native项目目录下键入react-native run-ios会启动iOS模拟器,默认是使用iPhone6,如果想要试用其他版本的模拟器则需要在react-native run-ios后携带参数–simulatorsimulator后指定模拟器的名字,注意需要添加双引号。例如启动iPhone7react-native...原创 2018-05-21 13:48:12 · 4488 阅读 · 0 评论