![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react native
文章平均质量分 51
琞、小菜
这个作者很懒,什么都没留下…
展开
-
React Native报错总结
特别声明:react native坑太多,可能每个版本对应的环境都不一样,现使用环境配置如下react native0.64.0java JDK 1.8Android Studio 4.1CocoaPods 1.10.1问题:1* Where:Build file '/Users/xxxx/Desktop/zxcz/zxrn1/AwesomeProject5/android/build.gradle'* What went wrong:Could not compile build原创 2021-03-24 10:34:32 · 459 阅读 · 0 评论 -
react native踩坑日记(7):头像编辑(拍照,选择图片,上传,毛玻璃背景效果实现方式)
最近继续迭代RN项目。也开始了继续踩坑,爬坑的“幸福生活”。上周刚完成头像设置的相关操作,大致分为毛玻璃背景,选择相册图片,拍照,图片裁剪,上传OSS(这一步主要是服务端配合,后面会详细说明)。由简到难,逐个讲解使用到的npm包和相关方法。1:毛玻璃的效果实现先看下效果图:要实现这个的效果,我尝试了使用opacity,但是跟这个完全不搭边,所以就找了个npm包,@react-native-community/blur,文档跳转yarn add @react-native-community/blur原创 2020-12-29 15:57:02 · 1295 阅读 · 0 评论 -
react native踩坑日记(6):获取手机通讯录 按照首字母排序
获取通讯录npm包react-native-contacts地址获取汉字首字母npm包pinyin地址使用上面两个npm包,再加上RN的组件就可实现获取手机通讯录内容,且可以按照姓名的首字母进行排序。实际相关的文章有很多,这里主要讲述自己在实现的过程中遇到的问题,以及是怎么解决的。1:react-native-contacts的使用具体使用的方法可点击地址查看详细的使用步骤,这里说一下我在使用的过程中遇到的问题。react native >= 0.6版本的不需要在单独link如果你.原创 2020-10-16 15:40:19 · 846 阅读 · 0 评论 -
react native踩坑日记(5):react native 设置tabs
在我们项目中难免会需要tabs组件,下面介绍三种创建tabs组件。分别是:antd mobile for react native 的组件tabs,包括如何使用antd mobile for react native 的组件Carousel,这是个投机取巧的方法,但是也蛮好用的使用createMaterialTopTabNavigator 创建tabs路由导航。这是个react navigation 的API逐一分析下利弊antd mobile for react native 的组件tab原创 2020-06-23 14:43:07 · 1458 阅读 · 0 评论 -
react native踩坑日记(4):react native 中设置阴影,渐变
推荐两个组件还是蛮好用的,具体怎么用我就不会多介绍了,看文档就可以了。有什么问题可以留言一起探讨一下。import LinearGradient from 'react-native-linear-gradient'; // 渐变import {BoxShadow} from 'react-native-shadow'; // 阴影这个阴影是生成一个阴影区域,放在需要阴影元素的下方,个人感觉还是没有css的那种阴影友好...原创 2020-06-23 13:49:04 · 603 阅读 · 0 评论 -
react native踩坑日记(0): 如何配置 IOS React-native环境
最近要搞一个RN的demo,搞就搞吧,那就先把环境搭起来。搭就搭吧,这环境一搭就是一天。给大家分享一下自己在搭建环境时所遇到的坑,和一些可以方便我们快速搭建环境的方法。接下来的一系列操作:如果你有很稳定很迅速的科学上网方式,那就直接按照RN官方给的说明安装就行了如果你已经安装了所以插件,但是运行项目失败,你可以直接跳转到第六步看起我们也是按部就班的按照官方给的文档进行安装,只不过会有些需要注意的点。安装Homebrew,因为RN官方推荐使用Homebrew安装node和Watchman,当然你也原创 2020-06-02 14:39:56 · 389 阅读 · 0 评论 -
react native踩坑日记(3):react native使用E charts
项目中有图表模块,首先就想到了E charts,但是想再RN中使用可仅仅是npm装一下就行了。另外在结束一个可以在RN中使用的图表库,因为没有中文文档,我这英语水平就放弃了,如有需要可点击此处查阅下面讲述一下如何在RN中集成,并使用E charts第一步点击此处下载此npm包的zip包,把其中的src文件夹复制出来放到我们自己项目的目录下,放到哪自己定。为什么要这么做呢?是因为我们需要修改其中的配置文件,通常在我们进行代码管理的时候是不上传node_modules文件夹的,这样我们做的修改仅仅是修原创 2020-06-18 13:07:43 · 622 阅读 · 0 评论 -
react native踩坑日记(2):react-native + react-navigation 实现底部导航点击动画
我也是一个RN初学者,而且钻研的不是很深,如果你想要在这看到深入原理,针对每一个细节都有详细解读的话那你可以另寻他处,我这只能满足普通的业务需要。不会讲述每一个点如何使用,只是提供一个可以突破的点,怎么做可以去实现。趁着项目还在启动,整理一下如何使用react-navigation的createBottomTabNavigator创建底部导航时增加上点击动画。实际是一个很简单的功能,但是不知道为什么被我搞了一天,快下班了灵光一闪给整出来了。不需要借助npm包什么的,只需要用到RN的Animated,原创 2020-06-16 10:10:54 · 494 阅读 · 0 评论 -
react native踩坑日记(1):react-native中集成二维码扫描,识别相册二维码
声明:写这篇文章的时候安卓手机未测试,苹果手机可正常使用,如果有后续结果,会在更新,但是理论上是适配ios和安卓首先选择如下三个npm包import {RNCamera} from 'react-native-camera';import ImagePicker from 'react-native-image-picker';import {QRreader} from 'react-native-qr-scanner';安装方法yarn add react-native-cameraya原创 2020-06-11 16:42:53 · 1388 阅读 · 0 评论