孙先森的博客

记录一下本地实现列表模糊搜索，效果图：实现思路：利用TextInput的onChangeText方法，当输入框文字改变时立即去调用自己写的数据筛选方法，修改Flatlist的data（data应该是定义在state中）。列表数据最好用map循环给每一条数据增加一个新的字段（此处用hidden解释）控制item是否显示。搜索方法中判断输入框传过来的关键字，长度大于0时，用map循环data，不...

困扰两个星期的问题，在这里记录一下：首先提一下FlatList的坑，目前使用的0.59.9版本 onViewableItemsChanged方法 在多次取viewableItems中index的时候 会出现不准确的情况，我的Item是一个占一屏并且设置了pagingEnabled在这种情况下 ， 我采用了onMomentumScrollEnd方法去获取滑动的距离，以及测量item的高度去计算出当...

项目添加react-native-camera库时的各种报错解决办法1.Could not resolve project :react-native-camera明明已经添加了却老师报could not resolve解决办法：在app下的build.gradle中添加一行代码android { ... defaultConfig { ... missingDi...

最近学习了下ReactNative中的触摸事件，写个例子实践一下。Demo效果：当触摸红球时开始触发事件，红球随着手指移动改变位置，松开时回到原位，如果拖入蓝色区域则删除（隐藏），单击左上方按钮红球显示在原位置。主要是利用了View触摸函数onResponderMove（触摸屏幕并且移动）和onResponderRelease（出触摸事件结束函数）实现。代码如下：var Dimensi...

记录一下自己学习使用Redux的过程：通过一个简单的Demo理解什么是Redux。个人觉得Redux最大的优势在于没有任何关联（没有嵌套，没有父子组件关系）的两个页面，可以在任意一个页面操作其他界面的state。 功能很简单，单击“+”或“-”，数值对应的增加或者减少。单击+或者-时不去直接修改数值对应的state，而是通过dispatch去发送一个action，由Reducer去匹配ac...

实现思路：视频播放采用react-native-video，非常好用的视频播放库，列表整体采用FlatList实现，每一个item都占一整屏（flex设为1），再给FlatList设定pagingEnabled属性（滑动滚动一屏），viewabilityConfig中设定可见区域滑动的阈值。效果图：实现过程：我的代码使用了react-native-ui-lib库，所以直接复制控件的属性会...

首先需要在终端输入install命令安装react-navigation，以及link本地依赖关系：npm install --save react-navigationreact-native link react-native-gesture-handler下面实现的是StackNavigator嵌套底部导航BottomTabNavigator新建一个js文件RouterConfig...

react-native-camera是一个非常好用的RN调用摄像头的第三方库，github地址：https://github.com/react-native-community/react-native-camera使用的时候有几处坑，在这里记录一下开发过程，首先效果图：使用时先安装依赖在rn中：npm install react-native-camera --savenpm l...

我在导入别人的RN项目之后运行时报如下错误： 解决办法：用AS打开android文件夹，检查build.gradle中的applicationId与AndroidManifest.xml中的package的值是否一样，若不一样修改成一致的，再次运行即可。...

实现思路：Tab部分采用ScrollableTabView+ScrollableTabBar，切换的页面可以封装成一个可以复用的。效果图：代码如下：首先安装第三方库npm install react-native-scrollable-tab-view --saveScrollableTabView部分代码：<ScrollableTabView ...

记录下自己开发遇到的需求，效果图如下： 自定义标签控件（代码是图一样式的，单击会高亮显示），代码如下：renderKeyView = (data) => { //console.log('数据源',data); return ( data.length === 0 ? null: <View...

文章目录1.RN调用Android原生封装的代码2.RN引用Android的控件以及传递参数1.RN调用Android原生封装的代码首先在AS中新建一个类继承自ReactContextBaseJavaModule代码如下：public class TestNativeModule extends ReactContextBaseJavaModule { private React...

最近在学习RN开发，总结下组件的生命周期，直接用下面一段组件的代码来展示一下：export default class ComponentName extends Component{ //props state 初始化和设置 getDefaultProps(){ } getInitalState(){ } //将要挂载 业务的初始化 只执行一次 ...