- 博客(29)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 函数式组件 ref 的解决方案
对于 React 中需要强制修改子组件的情况，React 提供了 Refs 这种解决办法，使得我们可以操作底层 DOM 元素或者自定的 class 组件实例。除此之外，文档（v17.0.1）对函数式组件另有描述:不能在函数式组件上使用ref属性，因为他们没有实例。在函数式组件和 Hooks 大面积普及的现在，这个特性没有完全对标 class 组件，令人难以置信。经过一阵探索，发现确实是有对应的解决方案的：useImperativeHandle结合 React.forward ， useImperat
2021-01-20 22:51:40
4782
2
原创 React Native 选择器组件 / react-native-slidepicker
react-native-slidepicker一个纯 JavaScript 实现的的 React Native 组件，用于如地址，时间等分类数据选择的场景。github: https://github.com/lexguy/react-native-slidepicker效果三轮选择，选择级联地址数据：（可自定义条目高，选中和非选中条目的背景色，字体颜色和大小） 起因当前使用的 react-native-picker 组件，虽然并没有什么功能上的硬伤，但是在样式可调性上稍差，而且鉴于该
2020-12-21 23:06:53
1236
原创 CSS - position
在 CSS 中，position 是实现元素定位的一种重要方式。使用定位的元素层叠级别比浮动会更高，采用定位来控制元素位置会更加容易。一般我们使用定位，是通过使用定位模式和边偏移量来确定元素位置的。定位模式一共有如下：staticrelativeabsolutefixedstickyinherit偏移量就是 top right bottom left 的值，指定到上 右 下 ...
2020-03-12 23:59:44
272
原创 [React Native]基础-父子组件之间的传值和函数调用
组件的复用是 React 中非常重要的一个设计，使得界面布局的重用十分便捷，我们可以根据自己的需要来自定义各种组件，这对于结构相似的 UI 构建是很友好的。所以经常我们会出现如下的代码结构（其中的 MyComponent 是自定义组件）：export default class Home extends Component{ ... render(){ <View>...
2019-11-26 12:21:59
1822
原创 [React Native] 动画 · LayoutAnimatd 和 setNativeProps
LayoutAnimation对于一些既定的界面元素，图片、文字、滚动视图等动画效果，我们会优先选择 Animated 来进行处理。但是如果你的动画效果需要改变布局，涉及到其他的 View 或者节点元素。那么就应该优先考虑 LayoutAnimation 来实现了。较之于 Animated，LayoutAnimation 的使用要更简单。 如果你用 state 记录并改变过某一 View 的高...
2019-11-12 14:40:06
382
原创 [React Native] 动画 · Animated
[React Native] 动画 · Animated如果要在一个 React Native 应用中添加动画效果，首先考虑的就是官方提供的 Animated 。通过定义输入和输出的动画状态值，调用 start/stop 方法就可以执行起来，使用上可以说是非常友好方便。Animated 动画组件有：如果让某个界面元素拥有动画效果，那它应该使用如下的动画组件：Animated.ViewA...
2019-11-08 00:30:00
957
原创 【瓣芽·Banya】React Native 构建的仿豆瓣应用
今天介绍一个用 React Native 创建的应用，集合了豆瓣电影，图书等信息展示功能的 app。github 地址 → 【瓣芽·Banya】项目使用了react-navigation 做路由。redux 做部分状态管理，redux-persist 做数据本地化 。采用了少量的第三方库，并同时兼容 Android 和 iOS 端。项目适合初级 RN 开发者，对于 React Native 的...
2019-09-19 21:44:09
573
1
原创 【React Native】定位获取经纬度
RN 文档上的定位功能需要谷歌框架支持，无疑带来了一些麻烦。github 上也有一些开源库，react-native-geolocation-service等。但是这里还有一个更简便的位置获取 API。使用内置对象navigator: navigator.geolocation.getCurrentPosition( res => { // co...
2019-08-21 14:20:09
2205
1
原创 【React Native】返回界面触发方法
从任何页面返回到 A 页面时触发 A 页面函数经常会需要从某个界面返回时，当前界面需要触发一些操作，借助于 react-navigation，这个操作就可以用其中的 NavigationEvents 来完成。import {NavigationEvents} from 'react-navigation';在页面组件的render方法中：render(){ return( <...
2019-08-05 16:45:28
1839
原创 github 上的 MarkDown 页内跳转
github上的 MarkDown 好像并不是支持所有功能，为了让写好的MarkDown文件上传到github后能按预设进行跳转，可以采用下面的方式：（跳转是需要先设置锚点的，也就是在需要跳转到的位置设置一个标记。）1. 跳到标题github 的 MarkDown 中的标题直接就是一个锚点，比如说你有一个标题是 Update ，对应的 MarkDown 语法长这样：### Update...
2019-07-26 18:59:20
1199
原创 【React Native】页面外更新组件状态
在 React Native 中，我们经常会有这样的需求，A 页面进入 B 页面，再在 B 页面中，希望触发 A 页面的一些操作，或者用其他API 获取的数据来刷新 A 页面数据，但 API 调用操作又不在 A 页面中，并且需要监听。下面我们分几种具体情况来说明如何操作：B 页面中触发 A 页面的函数 【跳转传递函数】使用场景：如果我们 A 页面中一个组件使用了某个变量，比如 text，而进...
2019-07-21 14:59:42
427
原创 【React Native】豆瓣同城 DCity 项目
本篇文章介绍用豆瓣 API 打造的豆瓣同城项目 DCity 。 Github 地址 应用下载地址
2018-08-27 23:07:45
177
原创 【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native时，需要用到城市定位的功能，React Native中文网的定位部分中也提供了相应的方法。主要用到的方法有： 这里只需要获取到经纬度，城市等信息，持续监听的函数就不需要了。这里使用 getCurrentPosition 方法获取当前位置信息，再用逆地址解析服务完成地址获取。代码次要点：Promise对象 【菜鸟教程Promise，阮一峰ES6-Promise，M
2017-12-25 14:03:50
14442
16
原创 【React Native】app\build\intermediates\res\merged\debug\values-v24\values-v24.xml中错误
昨天在项目中使用了 react-native-svg 库，配置完成正在正常启动的时候，却出现四个错误，全部来源于app\build\intermediates\res\merged\debug\values-v24\values-v24.xml 文件。该文件的第三行和第四行的style项，试图删掉这两个文件，但删掉之后同步项目或直接运行的时候又自动加上了这两行，然后依然报错。错误如下：No reso
2017-10-12 11:31:57
4933
原创 【React Native】react-Navigation之StackNavigator
Navigator一直是被用作导航跳转的组件，但是到0.44版本后就移除，使用时需要引入react-deprecated-custom-component这个模块，但是最近使用这个模块中的Navigator组件依然出现问题，指错误向一个library文件。 只得使用最新的导航库React-Navigation中的StackNavigator完成页面跳转。（导航库React-Navig
2017-09-10 21:58:17
874
原创 【React Native】React Native之Could not get BatchedBridge,make sure...的问题
下载了一个项目，npm install安装之后，再次运行，却出现Could not get BatchedBridge,make sure your bundle is packaged correctly的错误。 长这个样：先说解决方法：1 . 在项目的android/app/src/main目录下，新建一个assets文件夹。2 . 在项目的根目录下，通过git-cmd运行命令：react-
2017-07-01 11:32:34
1793
转载 NineOldAndroids动画兼容库的使用-ViewHelper
功能介绍： NineOldAndroids是github上的一个开源项目，其作用是为了在低版本android上（API11以下）使用属性动画。它的原理其实也很简单，主要就是判断当前sdk版本，如果大于API11，那么就调用官方的API，否则自己实现动画效果。另外，在API使用方面，它与官方的属性动画基本一致。比如ObjectAnimator、ValueAnimator等等。一.基本使用 跟官方类似，
2017-07-01 10:01:46
3699
原创 从高考到程序员
转瞬之间，大四也已经结束了。天气晴朗，毕业典礼上也人声鼎沸，让我不禁想起了四年前，高考结束大家急忙收拾东西逃离校园参加班级聚餐的情形，与今日独自回宿舍最后清理一遍行李箱后拖着就走的情形并没有太大的不同。高三那时，苦苦备考，朝六晚十，却并没有对考试后的人生有太多的设想和安排，只记得教室里午睡后惺忪的睡眼，晚上头顶摇晃的日光灯，大家忙碌的身影，以及弥漫在教室的紧张气氛。然而，所料未及，考试完也
2017-06-24 21:32:31
3213
21
原创 【React Native】React Native中DrawerLayoutAndroid通过点击实现展开和关闭
React Native中，DrawerLayoutAndroid组件与Android原生开发中的DrawerLayout一样实现侧滑菜单的效果。通过手势左右滑动实现拉出与退出的操作，但是需要通过点击图标或者文字就能弹出侧滑菜单该怎么做呢？ 这时就需要知道DrawerLayoutAndroid在展开和关闭时所调用的具体方法了，这个可以通过源码知道，点开DrawerLayoutAndroid.and
2017-06-19 12:27:00
988
原创 【React Native】React Native之Navigator has been remove from this package...的问题
前些天在对之前创建的RN项目使用navigator的时候，发现一个错误：Navigator is deprecated and has been removed from this package. It can now be installed and import from ‘react-native-deprecated-custom-components’ instead of ‘react
2017-06-18 16:17:39
3382
原创 递归实现数N的二进制表示
实现递归方法，使它返回数N的二进制表示中的1的个数。（如果N是奇数，那么N的二进制表示中的1的个数为N/2的二进制表示的1的个数加1）。实现见文章最后。 数据结构和算法(Java语言描述)的第一章课后题。 先简化思路，可以先用递归实现数N的二进制表示，先用字符串类型，再用String进行字符对比获取二进制表示中1的个数。 根据数N的获取二进制表示的算法（除2取余，并将余数倒序排列）实现二进制表示
2017-06-05 11:48:11
1488
原创 N个数中的第k个最大值
确定一组N个数中的第k个最大值，这是数据结构和算法分析(java语言描述)中讨论的第一个问题。书中第一章也已给处两种常规思路：1－先将N个数的数组整体进行递减排序，然后返回位置k(数组索引为k-1)上的元素。 2 - 先将N个数的前k个数读入到数组，并将数组递减排序。然后将剩下的元素逐个读入。新元素读取时，如果小于数组中第k个元素则忽略，否则就放入到正确的位置，同时数组中最后一个元素被挤出数组。
2017-06-05 11:01:52
1311
1
原创 【React Native】JavaScript 中 bind 方法
JavaScript中jQury的bind方法为选定元素添加事件处理程序，规定事件发生时运行的函数。 语法为：$(selector).bind(event,data,function)也就是相对应的event事件发生时就会执行function函数。data是传递数据的可选参数。event和function必须指定明确。 在React Native中bind方法的作用也是这样，为指定的事件添加相
2017-05-22 22:53:03
5345
原创 【React Native】React Native元素样式设置
学习React Native时，总是会将样式的设置和JavaScript的样式设置混淆。特地总结一下使用上的问题并将其与CSS样式进行对比。 React Native中文网上明确说React Native的样式就是JavaScript的样式，只是按照JS的语法使用了驼峰命名法。而且推荐使用StyleSheet.create的方式来创建样式。看看这些常用样式的做法： <Text styl
2017-05-16 20:11:59
2526
原创 JavaScript实现数字配对游戏
JavaScript实现数字配对游戏 游戏效果如下图所示： 规则：在4X5的格子中，有随机的互不相等的10个数，每个数据有两份（也就是20个数，有两两相等的十对）,随机分布在20个格子中。游戏开始，弹出二十个数的序列。每次点击格子会显示当前格子中的数据并暂时保留显示，直到下一次点击，如果下一次点击显示的数据与保留的数据不同，则之前点击保留的数据会消失(仍然存在于该格子但不显示)
2017-05-16 09:53:56
1648
原创 JavaScript生成指定范围随机数和随机序列
在JavaScript中我们经常使用Math.random()方法生成随机数，但是该方法生成的随机数只是0-1之间的随机数。先看如下常用方法的特征:1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 2.Math.floor(num); 参数num为一个数值，函数结果为num的整数部分。与取整数的parseInt(num)方法一样。 3.Math.round(num
2017-05-07 17:31:17
6202
原创 JavaScript生成指定范围的随机数和随机数序列
在JavaScript中我们经常使用Math.random()方法生成随机数，但是该方法生成的随机数只是0-1之间的随机数。先看如下常用方法的特征：1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1)2.Math.floor(num); 参数num为一个数值，函数结果为num的整数部分。与取整数的parseInt(num)方法一样。3.Math.ro
2017-04-30 21:41:23
9314
3
原创 JS学习-初学Ajax
Ajax即是Asynchronous JavaScript And Xml 。异步 的JavaScript和XML。Ajax可以通过在后台与服务器进行少量数据交换，实现网页的异步更新。在不重新加载网页的情况下，对网页进行局部更新。（本地Ajax的使用需要安装phpStudy，访问通过localhost）Ajax的使用：应先创建XMLHttpsRequest对象。op
2017-04-29 22:30:30
469
转载 欢迎使用CSDN-markdown编辑器
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2017-04-29 12:53:00
270
空空如也
ReactNative中通过setInterval改变State时的参数问题
2017-05-13
SurfaceView初始化顺序的问题
2017-04-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人