React Native(React)
文章平均质量分 74
React Native 将原生开发的最佳部分与 React 相结合, 致力于成为构建用户界面的顶尖 JavaScript 框架。
ZhangKui_c
Flutter、React-Native、Uni-app、Ionic、iOS、Web、小程序
展开
-
【跨平台】跨平台App开发
综合自己近几个项目的开发,结合在线资料的查询,对目前流行的跨平台应用开发技术进行一个整理。框架几乎都包含以下特性:使用 HTML5 + CSS + JavaScript 开发跨平台重用代码丰富的UI库提供访问设备原生API的 JavaScript API 包装器解决原生开发中机型适配的难题提供打包、部署的工具或服务...原创 2018-02-24 15:25:17 · 1390 阅读 · 0 评论 -
【React Native】version mismatch
React Native 经常遇见的一个错误:在解决这个问题的过程中会发现很多奇葩的问题,明明操作正确,却仍然报错,特别是Android端,但我们也只能老老实实的按步骤的和它干,佛性的对它,以下是我的解决路线:1,Close all terminals and run build again.关闭命令行服务,重建项目;2,按照画面中提示的运行命令:watchman watch-de...原创 2018-11-16 10:31:28 · 431 阅读 · 1 评论 -
【React Native】极光推送 jpush-react-native 的实现,支持Android和iOS
在接到需求后对如何实现进行了预研,发现有极光官网维护的jpush-react-native和 React Native 中文网维护的react-native-jpush供我们使用,我选择的是jpush-react-native。一,相关版本信息{ "name": "app", "version": "0.0.1", "private": true, "scripts":...原创 2018-10-29 15:17:12 · 992 阅读 · 1 评论 -
【React Native】'config.h' file not found
错误:React Native 'config.h' file not found解决方法:1,执行命令:cd node_modules/react-native/third-party/glog-0.3.42,执行命令:../../scripts/ios-configure-glog.sh3,Clean 然后重新build...原创 2018-10-24 13:57:45 · 407 阅读 · 0 评论 -
【React Native】调起地图进行导航(系统地图、高德、百度)
react-native 项目在实现地图相关功能时,将目标地址的经纬度传给系统地图、高德或者百度来实现从当前位置到目标地址的路线规划等功能,以及react-native 代码与原生代码的交互,共同实现地图功能。Demo地址:https://github.com/zhang-kui/Amap_RN.git文档待补充。。。...原创 2018-10-08 16:42:20 · 2785 阅读 · 1 评论 -
【React Native】使用开源库react-native-image-crop-picker实现图片选择、图片剪裁
一、react-native-image-crop-picker开源库介绍该库可以实现启动本地相册和照相机来采集图片,并且提供多选、图片裁剪等功能,支持iOS和Android两个平台,不同平台需要分别配置,详细的文字说明见github。二、集成开源库npm install react-native-image-crop-picker---or--- yarn addreact-na...原创 2018-09-29 18:02:28 · 8201 阅读 · 1 评论 -
【React Native】请求设备权限
React Native请求用户权限Request user permissions from React Native, iOS + Android参考链接:https://www.npmjs.com/package/react-native-permissions一、如何使用1.1 添加组件库:npm install --save react-native-permission...原创 2018-09-28 17:20:21 · 5884 阅读 · 1 评论 -
【React Native】获取设备信息
一、获取方案使用开源的第三方组件react-native-device-info,该组件适用于iOS和Android双平台。npm地址:https://www.npmjs.com/package/react-native-device-info二、组件使用在ReactNative项目中下载第三方组件依赖包,我们一般都是使用命令行来执行下载:进入项目执行:npm instal...原创 2018-09-28 15:19:52 · 5630 阅读 · 1 评论 -
【React Native】获取设备网络状态
一、快速使用React Native 内库中提供了NetInfo API获取设备当前的网络状态,直接使用即可。 componentWillMount() { NetInfo.fetch().done((status)=> { console.log('Status:'+status); }); }获取网络...原创 2018-09-28 11:41:35 · 2491 阅读 · 1 评论 -
【React Native】组件库(亲测版)
以下是自己在项目开发过程中使用过的,或者有接触的组件库,记录如下:--->导航组件native-base:React Native的基本跨平台UI组件--->导航组件react-navigation:项目中使用过,较为好用;但不同的版本有一定的区别;使用教程。react-native-tab-navigator:未使用过,功能预研时查询到的,暂做记录reac...翻译 2018-07-06 15:37:14 · 785 阅读 · 1 评论 -
【React Native】state、props、成员变量、静态变量、静态函数
一、State说到state就不得不提React Native的UI更新机制。与Android和iOS原生开发不同,原生开发的UI更新需要显示调用方法。而在RN中,如果组件使用state作为数据来源,由于系统会持续监控state,当state中的任何属性被改变时,组件都会被重绘,并触发render方法重绘UI,而不需要显示调用更新方法。我们可以在数据变化之后调用this.set...原创 2018-07-06 15:22:30 · 3416 阅读 · 0 评论 -
【React Native】导航组件react-navigation的使用
React Navigation 官网链接1,主要构成按使用形式主要分三部分:1,StackNavigator: 类似于普通的Navigator,屏幕上方导航栏2,TabNavigator: 相当于iOS里面的TabBarController,屏幕下方的标签栏3,DrawerNavigator: 抽屉效果,侧边滑出参考链接:https://v1.reactnavigat...原创 2018-07-04 18:00:40 · 293 阅读 · 0 评论 -
【React Native】组件生命周期
方法名 作用 constructor 构造函数,初始化需要的state 1次 componentWillMount 控件渲染前触发 1次 rander 渲染控...原创 2018-07-04 17:52:10 · 274 阅读 · 0 评论 -
【React Native】开发环境配置&第一个RN项目
Learn once, write everywhere.一、环境需求1.1 安装HomebrewHomebrew是OS X的套件(包)管理器,我们可以通过它获取并且安装很多组件安装方式: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"1....原创 2018-07-04 17:31:47 · 380 阅读 · 0 评论 -
【React Native】开发学习路线
我是一名iOS开发者,在两年年前就有接触到React Native,FaceBook在2015早期就开源发布了React Native For IOS,在2015年9月15日也发布了React Native for Android,fackbook强调的是learn once,write everywhere,可以让我们广大开发者使用JavaScript和React开发我们的应用,...原创 2018-07-02 17:14:07 · 358 阅读 · 0 评论 -
【React Native】父组件和子组件间传值的几种方式
在React Native的开发中,父子组件和兄弟组件存在关联关系的场景很常见,对这些场景做一个总结笔记。1,兄弟组件:所谓兄弟组件,就是说同一个页面,有两个组件,组件A,组件B,组件A的状态的变化,可以导致组件B的状态变化。有两种方式。第一种,在页面内定义一个State,组件A,使用props属性引入,操作组件A,修改页面内的State,然后,组件B,也是通过props属性引入页面内的S...原创 2018-07-09 11:15:21 · 5205 阅读 · 1 评论 -
【React Native】自定义列表下拉刷新
关于React Native List的下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了。为了满足项目需求,我在GitHub上搜到了这个组件,使用起来非常不错。同时支持android和ios,并且拥有相同的Api,可以自定义下拉刷新样式;它里面已经实现了View,Scrollview,Listview和Flatlist...原创 2018-07-09 10:32:15 · 1799 阅读 · 1 评论 -
【Xcode】Xcode 9 升级到 Xcode10 时遇到的问题
1,报文件重复Xcode File--> Workspace Settings --> Build System 修改为Legacy Build System (默认是New Build System)2,找不到库苹果在XCode10和iOS12中移除了libstdc++库,而使用libc++库;临时解决方案:拷贝缺失的 libstdc++、libstdc++.6、...原创 2018-11-16 10:52:19 · 1056 阅读 · 5 评论