ReactNative
文章平均质量分 62
1
Justin0223
I will be okay
展开
-
React Native三端同构(二: webpack@4脚手架构建和项目代码规范)
(一)前言一个完整的web开发手脚架,应该包含以下babel-loader 图片 音视频 字体 样式处理开发环境配置生产多环境scripts配置,流程化前端生产构建生产环境打包优化, 如构建速度,打包外链库,抽离公共模块,页面切片处理(代码内部),git commit 检查规范 和 eslint配置(二)webpack配置新增eslint配置增加webpack配置使用en...原创 2019-02-26 16:08:58 · 1169 阅读 · 0 评论 -
React Native三端同构(一: 基础方案)
(一) 前言React Native 三端(Web、iOS、Android)同构是指在使用 React Native封装组件 的代码下,让其在浏览器中运行出和在 React Native 环境下一样的页面。对于使用 React Native 开发的页面,如果又单独为 Web 平台重复写一份代码代价是极大的,而 React Native 三端同构能以最小代价做到一份代码三端复用。并且也需要提供W...原创 2019-02-25 18:25:05 · 1339 阅读 · 0 评论 -
React Native开发(九:兼容平板)
(一) 设置 Deployment Info因为默认rn创建为ipone,在ipod打开有大黑边所以需要 如下配置(二) 设置 比例函数如果默认使用rn的配置,会发现在ipad上面显示的很小,这时候需要缩放函数参考链接import { Dimensions } from 'react-native';const { width, height } = Dimensions.get...原创 2019-01-15 15:10:32 · 3345 阅读 · 0 评论 -
React Native开发(八:实用小技巧总结)
(一) React Native Debugger 中查看 network在我们打开react-native-debugger 时候, 我们不能从network查看网络请求,这时候有两种方案,在index.js 添加以下代码GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;参考...原创 2018-12-28 12:44:53 · 674 阅读 · 0 评论 -
React Native开发(七:如何实现绑定tabbar按钮新增权限判断和覆盖安卓默认返回事件)
(一)前言我们会遇到一种需求,在用户点击tabbar的时候,需要去判断当前用户是否有权限进入页面,那么我们需要在点击时候处理权限,然后跳转。基于这种需求,我们需要提供一个全局的navigationService.js方案提供全局跳转方案(二) 版本环境node 8.0+(v8.12.0)npm 5.0+(v6.4.1)java (v1.8.0_172)"react-native"原创 2018-12-23 19:28:56 · 551 阅读 · 0 评论 -
React Native开发(六:自定义React Navigation 过场动画)
(一) 前言版本环境node 8.0+(v8.12.0)npm 5.0+(v6.4.1)java (v1.8.0_172)"react-native": "0.57.1","react": "16.5.0原创 2018-12-17 15:53:58 · 2696 阅读 · 0 评论 -
React Native开发(五:整理安卓兼容性)
(一):前言安卓坑如狗!!!这里总结常见安卓兼容方案, 1. adb无法连接魅族手机2. 安卓modal无法覆盖状态栏3. 自定义手势PanResponder在安卓不生效原创 2018-12-05 19:15:37 · 2093 阅读 · 0 评论 -
React Native打包(三:react-native多环境打包)
(一)前言开发环境参考上章集成官方热更新 很详细的热更新链接安卓的参考链接地址(二)背景正常需求来讲,我们需要区分三种环境——开发环境、测试环境、正式环境(也可以成为生产环境)因为热更新分为 Production 和 Staging,所以在实际项目中,热更新如果不区分测试和生产环境,那么每次就重新打包给测试,待版本迭代完成才能热更新生产环境,这明显不合理。(三) 配置安卓为了解...原创 2018-12-04 16:11:18 · 5827 阅读 · 0 评论 -
React Native打包(二:react-native集成友盟)
(一)前言版本环境node 8.0+(v8.12.0)npm 5.0+(v6.4.1)java (v1.8.0_172)"react-native": "0.57.1", "react": &转载 2018-12-04 15:45:47 · 1060 阅读 · 0 评论 -
React Native打包(一: Build archive error vs Xcode10)
报错信息Multiple commands produce '/Users/tu/Library/Developer/Xcode/DerivedData/Tituk-fndmfujccqhdareyswrxhslqzyvn/Build/Intermediates.noindex/ArchiveIntermediates/Tituk/IntermediateBuildFilesPath/Uni...翻译 2018-11-30 14:04:12 · 441 阅读 · 0 评论 -
React Native开发(四:Could not install the app on the device, read the error above for details.)
前言手贱升级mac系统, 然后就报标题错误, 然后virtualBox 失效,重新安装后,导致genymotion 打开 react-native run-android 报上面错误,一开始以为环境变量问题,去其他rn项目 没这问题,然后以为genymotion 问题,确定下sdk位置,发现也是正常。但是其他项目也正常,master切到develop 正常运行,我凌乱了!!然后,我手贱...原创 2018-10-19 17:55:57 · 9707 阅读 · 0 评论 -
React Native开发(三: config.h not found)
前言rn还真是js优先原则,一旦涉及原生,依赖添加和移除都是踩坑开始。关联文件错误截图:不难看出,这是因为 关联关系问题解决方案也很简单cd '当前项目根目录'cd node_modules/react-native/third-party/glog-0.3.4../../scripts/ios-configure-glog.sh其实执行 .sh 命令之后Terminal界...原创 2018-10-19 00:46:38 · 579 阅读 · 0 评论 -
使用rem构建web h5应用 处理chart 和 app webview 在安卓下错乱问题
前言最早基于手淘做过一次H5 rem适配, 当时基于Hybrid APP。后面使用antd-mobile后,使用 阿里的高清方案。css 新增calc 函数 可以处理边框 配合 flex布局。但是字体大小要额外处理,并且部分安卓机型不支持calc。so,最后我还是决定采用阿里的rem。这也是踩坑的开始内嵌rn webview。我们为三方提供一个H5授权页,用于oAuth2 认证流程。在...原创 2018-09-08 16:48:12 · 1415 阅读 · 0 评论 -
React Native开发(二: 手动安装react-native-image-crop-picker)
前言考虑到RN的不稳定性。如果项目迁移, 有些事,真是做一次觉得没什么,但是过段时间如果需要再去做一次,就有点抓狂。项目版本依赖"dependencies": { "autobind-decorator": "^2.1.0", &a原创 2018-08-27 10:32:39 · 1319 阅读 · 0 评论 -
React Native开发(一:环境相关,出现Warning: isMounted(...) is deprecated in plain Javascript Classes)
前言使用React-Navigation出现以下问题:Warning: isMounted(…) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent mem...原创 2018-06-17 18:35:17 · 1383 阅读 · 0 评论