React Native
文章平均质量分 74
badgerYo
前端
展开
-
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 · 1318 阅读 · 0 评论 -
[React Native]基础-父子组件之间的传值和函数调用
组件的复用是 React 中非常重要的一个设计,使得界面布局的重用十分便捷,我们可以根据自己的需要来自定义各种组件,这对于结构相似的 UI 构建是很友好的。所以经常我们会出现如下的代码结构(其中的 MyComponent 是自定义组件):export default class Home extends Component{ ... render(){ <View>...原创 2019-11-26 12:21:59 · 1867 阅读 · 0 评论 -
[React Native] 动画 · LayoutAnimatd 和 setNativeProps
LayoutAnimation对于一些既定的界面元素,图片、文字、滚动视图等动画效果,我们会优先选择 Animated 来进行处理。但是如果你的动画效果需要改变布局,涉及到其他的 View 或者节点元素。那么就应该优先考虑 LayoutAnimation 来实现了。较之于 Animated,LayoutAnimation 的使用要更简单。 如果你用 state 记录并改变过某一 View 的高...原创 2019-11-12 14:40:06 · 428 阅读 · 0 评论 -
[React Native] 动画 · Animated
[React Native] 动画 · Animated如果要在一个 React Native 应用中添加动画效果,首先考虑的就是官方提供的 Animated 。通过定义输入和输出的动画状态值,调用 start/stop 方法就可以执行起来,使用上可以说是非常友好方便。Animated 动画组件有:如果让某个界面元素拥有动画效果,那它应该使用如下的动画组件:Animated.ViewA...原创 2019-11-08 00:30:00 · 1018 阅读 · 0 评论 -
【瓣芽·Banya】React Native 构建的仿豆瓣应用
今天介绍一个用 React Native 创建的应用,集合了豆瓣电影,图书等信息展示功能的 app。github 地址 → 【瓣芽·Banya】项目使用了react-navigation 做路由。redux 做部分状态管理,redux-persist 做数据本地化 。采用了少量的第三方库,并同时兼容 Android 和 iOS 端。项目适合初级 RN 开发者,对于 React Native 的...原创 2019-09-19 21:44:09 · 619 阅读 · 1 评论 -
【React Native】定位获取经纬度
RN 文档上的定位功能需要谷歌框架支持,无疑带来了一些麻烦。github 上也有一些开源库,react-native-geolocation-service等。但是这里还有一个更简便的位置获取 API。使用内置对象navigator: navigator.geolocation.getCurrentPosition( res => { // co...原创 2019-08-21 14:20:09 · 2277 阅读 · 1 评论 -
【React Native】返回界面触发方法
从任何页面返回到 A 页面时触发 A 页面函数经常会需要从某个界面返回时,当前界面需要触发一些操作,借助于 react-navigation,这个操作就可以用其中的 NavigationEvents 来完成。import {NavigationEvents} from 'react-navigation';在页面组件的render方法中:render(){ return( <...原创 2019-08-05 16:45:28 · 1977 阅读 · 0 评论 -
【React Native】页面外更新组件状态
在 React Native 中,我们经常会有这样的需求,A 页面进入 B 页面,再在 B 页面中,希望触发 A 页面的一些操作,或者用其他API 获取的数据来刷新 A 页面数据,但 API 调用操作又不在 A 页面中,并且需要监听。下面我们分几种具体情况来说明如何操作:B 页面中触发 A 页面的函数 【跳转传递函数】使用场景:如果我们 A 页面中一个组件使用了某个变量,比如 text,而进...原创 2019-07-21 14:59:42 · 461 阅读 · 0 评论 -
【React Native】豆瓣同城 DCity 项目
本篇文章介绍用豆瓣 API 打造的豆瓣同城项目 DCity 。 Github 地址 应用下载地址原创 2018-08-27 23:07:45 · 213 阅读 · 0 评论 -
【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 · 5382 阅读 · 0 评论 -
【React Native】定位获取经纬度,当前城市等地址信息
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法。主要用到的方法有: 这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了。这里使用 getCurrentPosition 方法获取当前位置信息,再用逆地址解析服务完成地址获取。代码次要点:Promise对象 【菜鸟教程Promise,阮一峰ES6-Promise,M原创 2017-12-25 14:03:50 · 14628 阅读 · 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 · 4965 阅读 · 0 评论 -
【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 · 903 阅读 · 0 评论 -
【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 · 1814 阅读 · 0 评论 -
【React Native】React Native中DrawerLayoutAndroid通过点击实现展开和关闭
React Native中,DrawerLayoutAndroid组件与Android原生开发中的DrawerLayout一样实现侧滑菜单的效果。通过手势左右滑动实现拉出与退出的操作,但是需要通过点击图标或者文字就能弹出侧滑菜单该怎么做呢? 这时就需要知道DrawerLayoutAndroid在展开和关闭时所调用的具体方法了,这个可以通过源码知道,点开DrawerLayoutAndroid.and原创 2017-06-19 12:27:00 · 1037 阅读 · 0 评论 -
【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 · 3421 阅读 · 0 评论 -
【React Native】React Native元素样式设置
学习React Native时,总是会将样式的设置和JavaScript的样式设置混淆。特地总结一下使用上的问题并将其与CSS样式进行对比。 React Native中文网上明确说React Native的样式就是JavaScript的样式,只是按照JS的语法使用了驼峰命名法。而且推荐使用StyleSheet.create的方式来创建样式。看看这些常用样式的做法: <Text styl原创 2017-05-16 20:11:59 · 2572 阅读 · 0 评论