最近在做一个RN项目,有使用到FlatList这样一个RN封装的组件去做上拉加载更多功能,在iOS和Android平台上,总结了以下几个遇到的问题及解决方案 1. 进入页面onReached开始就被触发 解决方案: // 伪代码如下 <FlatList ... onEndReachedThreshold={0.5} ... /> 当onEndReachedThreshold设置大于1时,的确进入页面就触发,设置在0-1之间时按正常逻辑走 2. 上拉加载更多onReached被触发两次,造成重复…

最近在使用React Native(以下简称RN)中踩了个坑,RN只能异步调用原生方法,所以在原生方法直接调用UI刷新操作需要将任务递交到主线程才可以. RCT_EXPORT_METHOD(finish) { UIViewController *cVC = [UIViewController getTopViewController]; [cVC.navigationController popViewControllerAnimated:YES]; } 调用的时候可以发现,线程并不是主线程.比…

这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的组件会经历三个阶段最终渲染在界面上,他们分别是:开始渲染.更新.卸载. 开始渲染: componentWillMount componentWillMount(): void 组件开始渲染的时候调用这个方法 componentDidMount componentDidMount(): void 组件…

项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看,避免踩坑. 后来觉得项目比较简单,tailwind对新上项目小伙伴确实不太友好,所以我们最终没有采用. 简介 GitHub - vadimdemedes/tailwind-rn: Use Tailwind CSS in React Native projects Tailwind 提倡了原子型的CS…

原文连接:http://www.studyshare.cn/blog-front/blog/details/1137 最近做一个app,使用React Native实现,如果严格按照RN官方文档去配置环境并初始化一个全新的项目,一路走下来,基本上是没有问题的. RN截止目前最新版本是0.58,如果之前的项目要在xcode和android studio上运行起来,可能会遇到各种各样的问题. 运行一些版本比较老的开源项目几个注意点: 1.android sdk 环境变量要配置好,具体参考RN官方文档…

应用 1 安卓打包 经验 解决方案 ,官方 解决方案 2 调试 用 React-Native-Debugger 教程 3 微信分享和登录 使用 react-native-wechat    地址 设计图来自蓝狐,可以根据里面的尺寸来进行开发,但是左右的间隔需要通过获取设备宽度减两边来得出, 苹果手机用 爱疯6,  安卓需用自定义尺寸. 在苹果上,默认高度是整个手机的高度:然而安卓默认是除了状态栏以下的高度,我们通过Dimensions获取的高度也是不一样的,也就是说,在安卓手机上获取得到的高度也…

官方文档中指出 SectionList 本组件继承自PureComponent而非通常的Component,这意味着如果其props在浅比较中是相等的,则不会重新渲染.所以请先检查你的renderItem函数所依赖的props数据(包括data属性以及可能用到的父组件的state),如果是一个引用类型(Object或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新.(译注:这一段不了解的朋友建议先学习下js中的基本…

相信和我一样,自己摸索配置环境的过程中,第一次配,很可能就遇到了这个比较简单地错误,没有配置sdk环境 解决办法 在电脑,系统环境变量中,添加一个sdk的环境变量 uploading-image-955548.png 然后在path中新建一个 %ANDROID_PATH%…

问题 在chrome启动debug模式,连接不到地址 解决办法 在模拟器中,ctrl+m调出command,选择dev setting,然后设置debug地址为localhost:8081…

报错 Could not install the app on the device, read the error above for details.Make sure you have an Android emulator running or a device connected and have set up your Android development environment 大概意思就是安装app到设备上失败,请确保您已经运行了一个安卓模拟器,然后输入adb devices提…

报错: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server. uploading-image-826347.png 原因分析 包管理服务器启动失败或没有启动. 解决办法一: 在项目目录下,运行react-native start,启动packager server. 解决办法…

一 .安装 1.Python2 和Java SE Development Kit (JDK)可以直接通过腾讯电脑关键安装, Android SDK安装的时候路径里不能有中文和空格 2.配置java环境变量 3. adb devices 为空,没有检测到设备 4.Invalid escape sequence at line 1 column 29 path $[0].name 在gradle.properties中添加org.gradle.jvmargs=-Dfile.encoding=UTF-…

React Native之坑总结(持续更新) Genymotion安装与启动 之前我用的是蓝叠(BlueStack)模拟器,跑RN程序也遇到了一些问题,都通过搜索引擎解决了,不过没有记录. 但是BlueStack有一些问题,比如没有菜单键,模拟器默认是横向的,商业化太严重(本来是用来玩游戏的),界面太丑,等等...... 于是我按照RN中文网的推荐下载了Genymotion模拟器,这一下,就是万劫不复...... 我是在官网下载的Genymotion,自带VirtualBox 5.0.4版本.下…

React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justifyContent 交叉轴对齐方式:alignItems 问题1. 横向排列居中对齐 要改主轴的方向 flexDirection:"row",justifyContent:"center"} 问2.水平布局并铺满的问题 要铺满用flex:1 . 如果发面没有铺满,居中显示…

),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Image是一个现实多种不同类型图片的React组件,能够进行载入网络图片,本地资源图片,打包的APP中的图片资源,以及磁盘比如:相冊中的图片. (二)Image基本使用方法 2.1.载入项目资源图片 从0.14版本号開始react native支持载入我们项目目录中的图片资源.我如今在測试项目中创建一…

React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 react-native-fs支持以下功能(ios android): 将文本写入本地 txt 读取txt文件内容 在已有的txt上添加新的文本 删除文件 下载文件(图片.文件.视频.音频) 上传文件 only iOS 三,使用实例 3.1 将文本写入本地 txt let rnfsPath = Plat…

在React Native里有很多种方法来创建可滚动的list.比如,ScrollView和ListView.他们都各有优缺点.但是在React Native 0.43里增加了两种行的list view.一个是FlatList, 一个是SectionList.今天我们就来详细了解一下FlatList. 如果你熟悉RN之前的ListView的话你会发现FlatList的API更加的简单,只需要给它一列数据,然后根据每一项数据绘制行就可以. 源代码在github上.代码中使用的是RN 0.49.5.…

自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依照网上给出的步骤,复制粘贴,在终端下操作就行. React Native中文网开发环境配置 当一切都已完成之后,我怀着激动的心情,打开了Xcode,尝试运行一下,查看开发环境是否正常. 完美~~~一切都是那么的完美,Welcome to React Native! 我真是天才,一次性成功,牛逼吧!!…

Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ render() { return <Text>{this.props.title}</Text> } }) 后来有了ES6 class Heading extends Component { render() { return <Text>{this.props.title}…

react样式模块化的"omit -loader"坑 众所周知 react样式的模块化(css modules) 是自己模块中写自己的css,与其他模块互补影响,解决了命名冲突和全局污染的问题. 在使用css modules时,需要先配webpack.config  但是在配的时候,出现了这样的问题(前提是已经加载css-loader和style-loader) 在这里我的css-loader是0.28.7 style-loader是0.19.0 看看自己的package文件的load…

终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使用会在后面讲到. 坑是什么样的坑 主要的是遇到一个业务需求,需要检测当前应用的版本是什么.需要返回当前的版本号和build数. 主要的需求在native来说非常简单: NSString * version = [[NSBundle mainBundle] objectForInfoDictionar…

如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2016的这一次是用React Native开发的. FB开源了RN的App 这次fb不仅开源了纯RN写的App,而且一同发布的还有开发这个App的教程.FB承诺会不断的更新这个app.教程放在make it open.不幸的是这个站点居然被墙了!!!技术博也能被墙,心中跑过一万个草泥马!!!F8的A…

代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN的填坑之旅系列,发现一路写下来都是我在开发中遇到的问题如何解决的.兴之所至,不问顺序.于是出现一个问题,填坑系列和学习知识的顺序不是很一致.比如今天要说的布局问题.其实在一个app开发之前,就应该有所了解.否则的话每次看到的<View style={{flex: 1}} />代表的是什么呢?上来就…

React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Navigator,NavigatorIOS也就不是什么难事了. 本文所使用的是React Native 0.34.FB团队更新的太快了,我会在后续出现大的改动的时候更新本文以及代码. Navigator基础 Navigator在不同的Scene之间跳转. initialRoute对象 这是Navigator所…

列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React from 'react'; import { Text, View, ListView } from 'react-native'; export default class DemoList extends React.Component { constructor(props) { super(p…

动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个动画可以处理的功能有哪些. 填坑材料Animated 动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默认支持动画.动画API会调用iOS或者Android的本地代码来完成这些组件的位移.大小等动画.这样各种动画在视觉上可以非常的流…

flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误.在js开发的过程中,总会遇到一些问题.小的还可以,比如用alert或者console等输出一些信息可以debug,并解决.但是如果项目比较大的时候,这些手法只能起到一定的辅助作用.更有甚者,有些问题不运行到那段代码,根本不会发现错误.Facebook…

掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的web开发中,最为重要的元素就是 . DIV是页面布局的基础,是作为容器元素存在的.在React Native中,类似于HTML的DIV的组件就是 View组件. 1 View组件介绍 作为创建UI时最基础的组件,View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且…

从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真是让人郁闷了. 坑 什么叫Button.略去各种细节可以得出一个定义:可以处理用户点击,在用户按下的时候有按下的效果,松开之后立即回复到原来的效果上. 在React里,可以使用直接使用HTML的元素.比如,<button />或者<input type="button"…

在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React Native提供了一套完善的机制,你可以非常简单的用来包装已有的原生视图. 代码地址:https://github.com/future-challenger/react-native-gaode-map 下面就用高德地图作为例子讲解如何包装原生视图.高德地图本身不仅有视图需要展示,还有一些和Rea…