halo1416的博客

前言：进行项目中又一个弹窗选择的功能，自己琢磨了一些，感觉自己写比较麻烦，所有准备集成一个第三方库，并选中了react-native-modal-picker 这个库。但是我在集成之后写demo的时候，发现老是报  PropTypes  的错误。错误如下：     项目中使用的 react 和 react-native 的版本：错误原因：     经过查找原因后我发现，我集成的...

前言：最近开发的app中有一个类似手机通讯录的组件，准备自己用 SectionList 做；注意：本文使用的RN版本为0.55版本，从官方文档上看SectionList是从0.43版本才有的。如果需要使用SectionList，请注意RN的版本问题。首先，看下最后的效果图：其次，接口请求的数据结构（mock模拟）：然后，看一下官方对SectionList数据格式的要求：ht...

问题描述：今天在做一个项目详情的时候，需要对react-native的组件源码进行修改。但是该node-modules里面的文件会有一个致命的问题：每次重装依赖（使用yarn install 或者 npm install）之后，node-modules里面的文件就会被重置（修改的源码没有了）！所以今天我准备将react-native这个库放在本地，希望不用每次yarn 之后都去修改，如：...

使用方式为: Linking.openURL(string)1. 打开浏览器：Linking.openURL(url);        eg：Linking.openURL('https://itunes.apple.com/cn/app/%E4%B8%AD%E7%9F%B3%E5%8C%96%E8%B4%B5%E5%B7%9E%E5%A4%A7%E5%AE%A2%E6%88%B7/i...

前言：在实际的 react-native 项目中，使用输入框 TextInput 组件是十分常见的。但是，在手机上（特别是ios平台），键盘弹出后遮挡视图（一般都是 TextInput 组件）的问题也是经常出现的。遮挡示例：在这样的效果中，这个页面的视图（包含顶部标题栏）是由 Container（native-base中） 组件包含的；而全部内容视图是由 ScrollView （rea...

问题描述：项目中长按文字显示粘贴，复制为英文；拍照时的提示语也是英文，日历插件也是英文状态。修改前效果：         解决方法：info.plist 或 在项目的info选项 => Localization native development region => 改为china（默认为en，即英文）；作用：将app内的软件设为中文修改为： ...

问题描述：在react-native中，我们开发一个组件时最终返回的内容一般都是一个 View 或者 Content 组件，其余的内容都包裹在这个组件中进行返回。直接来说，我们最终只相当于返回的一个 View 或者 Content 组件！！如下图：代码：export class Demo extends Component { constructor() { ...

最近，遇到了一个情况，react-native的TextInput组件在ios平台只有自带输入法（没有安装其他的第三方输入法）的情况下，没有办法输入中文。大概原因：react-native在0.55的版本下，TextInput组件有一些的bug！！不能使用它的 value 或 defaultValue 属性！！代码如下：情况1：<TextInput underlin...

前言：react-native开发的app，虽然说是兼容 android 和 ios 两端；但其框架本身的设计思想有很多还是和前端类似的（毕竟是 react 的衍生产物）；其开发模式主要还是组件化！今天，来总结一下，一个 react-native 标准的组件包括哪些元素：标准的组件完整代码：import React, {Component} from "react";import ...

前言：在react-native开发中；调用setState函数之后的state值不能立即使用，这个问题是我们经常遇到的。原因是 setState之后，需要走完react-native生命周期，也就是走到render时，state的值才会变成setState设置时的值，如果需要立即使用state的值，也是可以的！问题描述示例代码：import React, {Component} f...

前言：最近项目中大量使用的Webview嵌套H5的情况，其中一些需求免不了要对Webview 和 H5 进行数据交互。方式一：postMessage ==>> 注意：这种方式适用于React Native自身Webview组件，但在版本0.59时会提示Webview将被弃用1.RN端向H5发送消息1.1 RN端 首先Webview绑定 ref='web...

前言：在react-native项目中，列表是非常常见的，并且react-native官方也有提供列表组件FlatList；但是这个组件本身的上拉加载更多，下拉刷新属性是有一定问题的，需要我们字段去控制才能完美的实现。代码实现： ==>> 主要是实现 上拉加载更多，下拉刷新 功能，可能存在一些其他的自定义组件没有引入1. 首先，定义一个FlatList列表<Fla...

react-native中使用回调函数的频率是比较高的，特别在子组件传值给父组件时显得极其重要而且也是比较好用的一个方式！（父组件传值给子组件时使用props）。这里记录下回调函数的写法：函数方式和变量方式函数方式：传递回调的函数和回调函数本身是两个不一样的（分别写着两个函数里面）步骤：1. 父组件中定义回调函数this.forceUpdate() ：强制刷新界面，在p...

问题描述：在使用 FlatList 制作列表过程中，其 renderItem 属性返回的是一个 TouchableOpacity 的按钮，但是在触发其点击事件onPress时，总是报错！FlatList代码：_renderItem渲染item的代码： 报错原因：TouchableOpacity的onPress中使用了this，但他是不存在的，应用在FlatList的...

ps：效果主要在android平台上展示1. 进入指定目录（项目存放的位置）；2. react-native init cooperative_app --version 0.55.0 （--version 0.55.0：指定安装0.55.0版本；若不要version则默认安装native最新的稳定版）3. 可省略步骤 ==&gt;&gt; 即等待上面的命令完成并安装好依赖（可以自己手...

前言：react native虽然是当下比较好的跨平台开发解决方案，但是Hybrid APP比较比不上原生开发，有很多效果都无法实现。但是，react native有很多优秀的第三方库，足以满足我们的大部分开发。来公司快一年了，都主要在维护两个native开发的app（当然，也有很多新需求）和参与一些其他app的模块开发，作为一个菜鸟前端来说，native的环境配置和第三方库的集成对我来说是比...

注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！前言：这两天正在开发一个新项目，大佬在整理需求，so，项目环境的搭建以及常用第三方库的集成这种事情就轮到我了。。。项目中有一个错误...

注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！一、比较常用，集成简单的几个库（只需要安装即可的）moment.js  ==&gt;&gt; 一个 JavaScript 日期处理...

注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！这篇文章主要记录一些React Navigation的基本用法....前言：在 web 浏览器中, 你可以使用 (&lt;a&gt...

注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！这篇文章主要记录一些 react-native-image-crop-picker 和 react-native-image-zoom...

前言：最近新开了个RN的项目，网络请求用的是fetch，和以前的项目完全不一样，以前都是用的 redux + redux-promise + redux-saga 这一套来处理异步请求的。而在新项目中我们这边使用ES6的 async/await 来处理异步问题。今天介绍一下我学习 async/await 的过程：首先，说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个...

前言： 今天写了个父子组件的嵌套，有个需求是每次进入子组件都重新请求数据。但是，我的父组件是app的首页，并且是一个tabView，子组件是其中的一个tab页。我把数据请求写在了 componentWillMount 方法里，发现他只会调用一次，再次进入时并不会触发，就是进入到其他页面后返回首页再次进入这个tab页，componentWillMount也不会被触发。原因是：因为父...

在移动端上，输入框被软键盘遮挡是一个非常常见的问题，为此，RN原生的提供了一个组件 KeyboardAvoidingView 来处理这个问题，KeyboardAvoidingView的主要属性behavior 包含三个’height’, ‘position’, ‘padding’, 使用最多的就是 padding。但这个组件有时候使用起来可能失效。所以，需要找寻其他的方法方法一：Keyboar...