React Native
文章平均质量分 55
React Native使用实践和总结
三好夫人
仰望星空,脚踏实地
展开
-
项目接入rn模块过审试水经历
公司有一个项目里面有一个模块是用rn写的最近想发布一下新版本所以抱着试试看的目的,在我的个人已上线项目中也加入rn代码经过2天的等待邮件来了内容如下 熟悉的配方熟悉的味道熟悉的语气熟悉的高冷�� Guideline 2.1 - Information NeededThis type of app has been identified as one that may violate one...原创 2018-04-17 00:28:01 · 1296 阅读 · 0 评论 -
Apple Mach-O Linker(Id) Error错误解决
描述信息:/Users/ljl/Desktop/iOS/项目/个人项目源码/ks/Pods/BmobSDK/BmobSDK.framework/BmobSDK’ does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated ...原创 2018-04-12 17:33:13 · 2903 阅读 · 0 评论 -
JSPatch使用篇
ios端热更新方案: 1.动态库,测试用,真实使用的话会被苹果禁止. 2.lua脚本 比如:wax,热更新时从服务器拉取lua脚本,游戏开发用的比较多 3.weex 跨平台,一套代码,两端运行,用前段语言实现原生效果. 4.React Native 不能像weex能一套代码多端运行,有些代码需要2端分别编写 其中热更新有pushy/codepush 5.hybrid 比如ion...原创 2018-03-29 16:53:26 · 1172 阅读 · 0 评论 -
Warning: flattenChildren(...)警告解决方案
出现警告:Warning: flattenChildren(…): Encountered two children with the same key, .1:$4. Child keys must be unique; when two children share a key, only the first child will be used. 原因key出现问题了哪那边出现问题了呢一般...原创 2018-04-12 17:41:57 · 3054 阅读 · 0 评论 -
ReactNative - mian.jsbundle生成
我项目是ios原生集成了rn然后什么都完成了卡在了生成离线包这一个关上面,按照官方文档没能成功在网上也都是千篇一律的curl http://localhost:8081/index.ios.bundle -o main.jsbundle生成main.jsbundle方法而且都不怎么完整遇到问题也没回复我比如:比如你需要先将项目运行起来打开服务器也就是cd到你的项目根目录执行 npm s...原创 2018-04-09 15:11:48 · 1060 阅读 · 0 评论 -
React Native热更新方案
2中方式codepush和pushy 本博客是用pushy来热更新 前提条件,你有一个rn项目(并且已经搭建好了rn开发环境,比如node.js npm,Xcode等等) 楼主电脑时macOS High Sierra 10.13.1 注意:pushy只能实时更新rn部分代码,如果你的项目是ios+rn混编那么pushy只能更新rn代码,ios部分代码建议看看我的另一个博客用的是JSPatc...原创 2018-03-30 17:21:13 · 420 阅读 · 0 评论 -
_this2.setState is not a function
我当时出现这个错误是因为用的es5写法 构造器constructor(props) { super(props); this.state = { avatarSource:require('/Users/ljl/RNTwoApp/22.jpg') };render() render() { return ( <View style={...原创 2018-03-28 00:45:45 · 2004 阅读 · 0 评论 -
mac环境下的react native环境搭建
mac环境下搭建rn需要1.homebrew包管理 2.nodejs, 3.npm命令行工具 4.watchman 用来监视文件系统变更工具,可以提到开发效率 5.flow,静态js类型检查工具,是Facebook自家的代码规范nuclide 6.IDE 7.Xcode/studio android1)安装homebrew homebrew是mac包管理器,有了它我们才可以安...原创 2018-03-17 00:04:43 · 547 阅读 · 1 评论 -
React Native _this4.cellAction is not a function错误
在TouchableOpacity中使用onPress绑定cellAction点击方法,错误提示:_this4.pushToMyProfile is not a function<FlatList style={styles.flatlistlayout} data={this.state.dataArray} //es6写法,es5写...原创 2018-03-21 22:07:52 · 1567 阅读 · 0 评论 -
React Native开发错误警告处理总结
本文是我在开发过程中遇到问题解决方法的总结,首先万分简书ZPengs作者和qq群中的同行的帮助和反馈,持续更新中….. 遇到问题的可以来这个群里交流: 687663534 欢迎对 ReactNative 开发感兴趣的朋友加入! 687663534 错误1 估计是程序中有格式错误请自行检查比如:你注释出来问题。 {/title=”张三”/}换 //title=”张三”错误2 ...原创 2018-03-26 17:39:14 · 8580 阅读 · 0 评论 -
React Native嵌入ios项目集成(坑点)方略
第一步安装cocoapods mac自带ruby如果版本低了跟新一下 ruby —version(两个- -)sudo gem install cocoapods第二步添加package.json文件 cd到ios工程目录中 执行 vim package.json然后编辑一下 name:为项目名称根据自己的改一下{ "name": "RNTest", "version"...原创 2018-03-27 13:37:05 · 640 阅读 · 0 评论 -
使用Visual Studio Code编写react-native插件介绍
vs code安装插件如图 最后一个正方形图标然后在里面搜索下面的插件 小虫子的图标为调试项目用dash:直接搜索在线文档 EsLint:代码静态检查工具 git history:图形化gitlog查看 Path Intellisense:路径自动补全 react native tools:rn开发必备该插件支持了代码智能提醒,运行调试 Typings auto instal...原创 2018-03-27 13:52:59 · 2851 阅读 · 0 评论 -
rn与ios交互 rn(push)原生界面
react与原生交互有点类似于ios中的webview与h5交互,交互都需要有一端先发起交互请求,然后才能双方交互,当然ios第一次加载(webview或rn页面)也算交互请求那么总是ios端先发起交互请求,如果不算,那么都是其他端发起交互请求可以是传值,可以是监听函数.比如:rn端要给ios传值,那么react端必须监听ios中的某一个类中的某一个函数才能发起交互.如果ios想向react交互,...原创 2018-03-27 13:59:57 · 2306 阅读 · 2 评论 -
react字符串拼接(中间部分)
网上看了下好多多是es5写法不是最新的而且都是在末尾追拼接记录下给有需要的童鞋 楼主需要做加载更多所以要在rul中追加一下当前页数//构造器constructor(props) { super(props);//当前页 this.page=1}格式为 (“字符串” + this.page + “字符串”);va r URL =("http://mobile.ximala...原创 2018-03-27 14:05:28 · 10273 阅读 · 0 评论 -
RN-常用第三方组件
调用系统打电话、发短信、发邮件、打开网址功能 https://github.com/anarchicknight/react-native-communications快速检索列表(按首字母) https://github.com/johanneslumpe/react-native-selectablesectionlistview图表组件 https://github.com/t...转载 2018-03-27 14:10:10 · 263 阅读 · 0 评论 -
FlatList实现横向滑动列表效果
本文基于React Native 0.52http://www.cnblogs.com/MaiJiangDou/p/8351288.htmlDemo上传到Git了,有需要可以看看,写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo一、总览 这个效果也是APP里很常见的,之前把这个想的太复杂了...转载 2018-03-27 14:25:51 · 1675 阅读 · 1 评论 -
react-native集成微信支付
上篇文章已经介绍过 react-native 集成支付宝,本篇文章将基于微信支付官方提供的集成文档,介绍如何将微信支付集成到 react-native 应用中。场景介绍适用于商户在移动端APP中集成微信支付功能。商户APP调用微信提供的SDK调用微信支付模块,商户APP会跳转到微信中完成支付。支付完后跳回到商户APP内,最后展示支付结果。目前微信支付支持手机系统...转载 2018-03-27 14:32:24 · 1176 阅读 · 0 评论 -
react-native集成支付宝
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/production/htmledit_views-1f9cf0a071.css"> <div class="htmledit_views">现在很多 APP 都有集成第三方支付平台的需求...转载 2018-03-27 14:35:22 · 279 阅读 · 0 评论 -
简析React-Native中如何适配iPhoneX
一、介绍iPhone X 发布也有一段时间了,独特的 “齐刘海”,以及 “小嘴巴” 带给了苹果粉们无限的遐想,同时也带来众多的吐槽。前几天,招商银行公众号在微信推送了一条消息,11月招商银行App要发布最新版本,完美适配iPhoneX,是国内第一家银行App适配iPhoneX。感兴趣的朋友可以去下载体验一下。作为App开发者,此时你的心情是欣喜若狂,还是一万个XXX奔腾而过。欣喜也许是...转载 2018-03-27 14:41:03 · 2514 阅读 · 1 评论 -
关于 React Native 与 WebView 的通信
在React Native 0.37版本中,合并入了react-native-webview-bridge作者的某个PR,从此React Native中自带的WebView拥有了和Web通信的功能。此版本之前的版本也可以用react-native-webview-bridge或者其他WebView Bridge的方案进行通信。本文结构从讲官方支持的方法开始,到定义消息结构来扩展功能,到如...转载 2018-03-27 14:45:08 · 297 阅读 · 0 评论 -
React Native开发之expo的使用
背景react native官方现在推荐的项目构建方式是create-react-native-app,即简称CRNA,并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后,命令行输入npm start,随即会为开发者创建一个开发服务器,并打印出大大的二维码,使用expo扫码,即可预览项目,不过真的这么丝滑吗,使用中还是遇到了一些问题。二. 踩坑记手机和电脑均连接着同一...原创 2018-03-28 14:20:13 · 5841 阅读 · 0 评论 -
React Native - 使用Geolocation进行定位(获取当前位置、监听位置变化)
React Native 提供了 Geolocation API,让我们可以很方便的获取当前的位置信息,或者监听位置的变化。下面通过样例演示如何使用。 导入 API var Geolocation = require('Geolocation');一、获取当前的定位信息 1.getCurrentPosition()方法介绍static getCurrentPosition(ge...原创 2018-03-28 14:26:23 · 4630 阅读 · 0 评论 -
React Native - 使用Vibration API实现设备振动
有时程序中需要实现这样的功能,当有重要的消息提醒时,我们会发出声音告知用户。而如果用户关闭了声音,那么就可以改用振动来提醒用户。 React Native 提供的 Vibration API,我们可以很方便地让移动设备发生振动效果。 代码 Vibration,//震动组件添加API //震动 Vibration(){ //点击震动 Vibration.vibrate...原创 2018-03-28 14:29:28 · 1980 阅读 · 0 评论 -
React Native - 使用图片选择器react-native-image-picker拍照、选照片
我们程序中需要提供用户上传照片的功能。照片可以从设备相册中选择,也可以使用摄像头直接拍摄。这个功能使用 react-native-image-picker 库就可以很方便的实现。 1,react-native-image-picker介绍 react-native-image-picker 是一个第三方的开源库,它提供了原生的 UI 界面供用户选择图片或视频。图片或视频的来源可以是系统相簿,也...原创 2018-03-28 14:35:53 · 2450 阅读 · 2 评论 -
React Native循打印__nw_connection_get_connected_socket_block_invoke Connection has no connected handler
Edit Scheme…Environment Variables -> Add -> Name: “OS_ACTIVITY_MODE”, Value:”disable”原创 2018-03-28 16:42:44 · 940 阅读 · 0 评论 -
React Native 第三方分享
rn嵌入第三方分享.目前各大第三方平台还不支持rn集成(登入,支付,分享)所以我们必须要用迂回战术这一部分我们用原生集成然后rn传值调用原生. 代码 准备阶段 原生接入第三方分享这一部分略是个体力活 无非就是添加权限,添加白名单,申请key和导入sdk等 假设你原生第三方分享已经集成完毕了那么接下来我们就用rn传值过来并且调用#import "FirstViewController....原创 2018-03-28 17:24:06 · 1496 阅读 · 0 评论 -
ReactNative数据持久化的五种方式
使用JS写App完全是一种不一样的感受,思维方式跟OC编程很不尽相同,这篇文章主要来说说使用ReactNative的时候,数据是怎么存储的,也就是ReactNative数据持久化有哪些方案。总结的主流开发中一共有5种方案。如果有更好的存储方式,可以给我留言。1.通过RCTRootView的属性传值RCTRootView在初始化的时候,我们可以从Native这边通过属性传值的方式传到JS这边...转载 2018-03-28 17:58:09 · 2266 阅读 · 0 评论