- 博客(36)
- 资源 (2)
- 收藏
- 关注
原创 reactnative 自定义下拉刷新组件 react-native-smart-refresh
rn自带的刷新库样式无法自定义,于是自己参考了 ios MJRefres android SmartLayout 并且参考了rn的相关库来实现了 和官方 RefreshControl 相同功能用法的库react-native-smart-refresh1.首先给大家上一个预览图react-native-smart-refresh2.项目地址https://github.com/gaokaikai/react-native-smart-refresh相关源码均已公开 欢迎大家的 Star...
2020-12-28 13:53:07 1559 3
原创 ReactNative选择头像裁剪截屏生成新头像并保存到本地
1.需求 需要根据不同等级展示不同的头像边框 用户可以选择头像 然后裁剪合成 变成带边框的头像 并且可以下载到本地2.实现思路 用户进来选择头像(使用react-native-image-crop-picker)之后 将头像和边框(react-native-view-shot)进行快照 保存到临时路径 点击下载 (使用@react-native-community/cameraroll)保存到本地相册 需要注意的是 图片加载需要时间所以要在图片加载完之后再进行快照3.具体实现1.用户选择头像
2020-07-20 16:56:04 790
原创 ReactNative手动实现热更新
1.需求因公司业务需要,需要更新本地游戏html文件以及rn文件。2.实现原理加载app 比较本地版本和远程版本 如果远程版本高于本地版本第一次更新则下载一个zip包 里边包含最新的html和rn文件第二次更新通过比较本地的map文件(list文件包含所有的文件信息)和远程的map文件 比较差异来下载不同的文件更新完成写入成功文件 并且写入版本号重启app下次启动app就通过写入的版本号进行对比3.实现细节我们的html资源安卓需要放在asset目录下i.
2020-07-14 17:59:34 3280
原创 mac安装brew node
1.安装 Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2.Homebrew的基本命令 brew -v brew search例如:brew search node brew list 例如:bre...
2019-06-03 13:14:51 845
原创 ReactNative mobx
版本 0.56启用babelpackage.json"devDependencies": { "@babel/core": "7.0.0-beta.47", "@babel/plugin-proposal-decorators": "7.0.0-beta.47", "babel-jest": "23.6.0", "babel-preset-react-native"...
2019-04-25 16:55:27 514
原创 ReactNative常用技巧
最近在做项目,趁机总结一下用到的知识点(欢迎大家补充)导航栏背景颜色安卓 <StatusBar barStyle="light-content" backgroundColor="#000000"/>ios 不支持背景色设置插件 react-native-statusbar-propsimport StatusBarProps from 'r...
2018-07-16 16:50:15 725
原创 ReactNative自定义原生模块 ios
第一步File->New->Project->Cocoa Touch Static Library本次采用object-c语言第二步实现了“RCTBridgeModule”协议//// RCTStatusbarProps.h// RCTStatusbarProps//// Created by bhsj_imac on 2018/7/2.// Copyright © 20...
2018-07-03 16:26:34 448
原创 ReactNative自定义原生模块 安卓
第一步 Android Studio打开项目 选择 File->New->New Module第二步 编写模块继承ReactContextBaseJavaModulepublic class RCTStatusbarPropsModule extends ReactContextBaseJavaModule{ private ReactApplicationContext co...
2018-07-03 16:15:46 340
原创 Android Studio 准确查看日志的方法
在开发过程中,出现问题时我们需要看崩溃日志,可是有的程序崩溃后系统会做些操作,导致日志很快就被顶掉,导致我们看不到日志。这样在我们开发的时候就会造成很大困难。所以记录下我的解决方法。...
2018-06-22 10:28:06 7188 1
原创 React Native 常见问题(持续更新,欢迎补充)
萌新在学习React Native中,遇到了不少的问题,都心平气和(气的要死)的解决了,特此帮助一下其他的同学。错误一React.Children.only expected to receive a single React element child.这个问题我是在用Touchable相关组件的时候碰到的,意思是只接受一个子组件,在组件外套一个View标签就好了。错误二...
2018-04-09 10:38:48 560
原创 React Native 中组件的生命周期
概述 React Native(RN)中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,对我们的开发很重要,对我们的开发很重要,对我们的开发很重要。(重要的事情说三遍,亲生经历,很重要)。贴个图,让大家理解一下有图有真相,组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段(图中的上方虚线框),在这里执行组件的加载和...
2018-04-08 11:37:31 413
原创 loading...字符变化动画
公司业务一个简单的需求loading...文字动画,不想用js实现,问过GPT后学习了css写法。需要添加文字动画的直接添加这个class就好了。
2023-11-30 17:15:33 147
原创 动力电池项目(前后台)总结
项目职责:1.独立负责该项目App的开发;2.独立负责该项目管理系统的开发;3.独立负责该项目接口的开发;5.独立负责该项目H5页面的开发;5.独立负责该项目调试、测试并打包上线;项目描述:为北京汽车技师学院做的一个动力电池项目分为管理系统和App。管理员可以上传、删除、修改、查看电池相关视频等信息,可以向App发送通知。App用户可以根据二维码查看电池相关信息。项...
2018-11-28 12:24:34 595
原创 智慧车库项目总结
岗位职责:1、独立负责公司 ReactNative 应用程序的设计开发;2、负责调试并修改应用所存在的问题;3、负责接口调试及与公司其他同事技术交流;4、负责 ReactNative 开发工作计划安排及相关技术文档的书写;5、负责项目测试及打包上传至 AppStore;项目描述:为北京汽车技师学院做的一款教师、学生二合一的一款App。教师可以通过App对共享教学资源如共...
2018-11-28 11:36:06 1218
原创 解决Mac上adb: command not found问题
使用mac进行开发的时候,有时候需要使用adb指令来进行一些操作,但是如果没有配置过Android环境变量,可能会出现adb: command not found的问题,查了一些资料,这里记录一下mac上配置Android环境变量的方法:打开mac的terminal终端,输入 cd ~/ 【进入当前用户的home目录】输入 touch .bash_profile 【如果没有.bash_profil...
2018-06-21 11:18:03 1138
原创 Mac查看本机IP的终端命令
在Mac系统中,打开终端,输入命令ifconfig并按回车即可查看本机IP,如图:输入命令ifconfig en0也可以查看本机IP(最后是数字0,而不是字母O),如图:
2018-06-21 11:14:00 154340 1
原创 React native 之android的图标和启动图片
哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了!ok~这篇说的是React native的android的图标和启动页面!!!!!1.图标:其实android的图标设置很简单,一般情况下只需要替换就可以了(当然你也可以不去替换,在资源管理的R.java里面设置也可以,这里不建议)图标规格 72 4...
2018-05-08 17:29:15 1348
原创 React native 之设置IOS的图标,名称和启动图
1.首先,app的名称:如图所示:我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息:比如Bundle name就是设置APP的名称2.App的图标:(这里注意的是:1.app的图标有尺寸之分,所以如果图片的尺寸不对,编译也就会失败!2.图标的圆角是系统自己设定的,也就是说,我们上传的图片是正正方方的!)如图:在工程文件下面的 images.xcassests的...
2018-05-08 17:28:22 5319
原创 ReactNative PanResponder 手势响应系统详解
我们知道,react-native封装了一系列的组件例如<Touchable**>来提供触摸事件的反馈,另外Button、Text等组件也提供了简单的点击方法来给组件快速添加触摸事件。但是这些组件都是针对某个特定的效果,因其是定制的,所以可自定义、调整的部分就会很少,至多是效果有个选项。那么,如果我们希望做复杂的效果,改怎么办呢?答案是panResopner。先看下panRespond...
2018-05-02 16:09:29 2170
原创 sqlyog注册码
姓 名(Name):ttrar序 列 号(Code):8d8120df-a5c3-4989-8f47-5afc79c56e7c或者(OR)姓 名(Name):ttrar序 列 号(Code):59adfdfe-bcb0-4762-8267-d7fccf16beda或者(OR)姓 名(Name):ttrar序 列 号(Code):ec38d297-0543-4679-b098...
2018-03-31 14:34:42 767
原创 调试React Native项目(webstorm)
第一步:下载安卓 React Developer Tools谷歌插件地址:http://blog.csdn.net/gaokaikai1996/article/details/79386992第二步:需要使用Debug模式启动react native项目第三步:在安卓设备上调出菜单 选择 Debug Js Remotely便会自动打开谷歌浏览器个人demo: http://www.chenzhuo...
2018-02-27 13:18:27 402
原创 React调试工具:React Developer Tools 谷歌插件下载
由于谷歌应用商店需要翻墙,个人分享一下下载网址个人下载链接:http://download.csdn.net/download/gaokaikai1996/10261131网上下载链接:https://www.crx4chrome.com/crx/3068/个人demo: http://www.chenzhuo.ltd/loveshare/...
2018-02-27 13:06:37 10745 3
原创 webstorm 如何快速运行命令行命令
需求:用webstorm学习ReactNative 需要启动模拟器(Android Studio 中的模拟器) 步骤:1.打开Edit Configurations2.点击+号 选择npm3.如下图所示4.点击下边的+号 选择External tool5.如下图所示启动命令 C:\Users\Administrator\AppData\Local\Android\Sdk\tools\emulato...
2018-01-18 14:05:17 13317
Vue.js 前端开发 快速入门与专业应用
2018-03-01
React Developer Tools 3.1.0
2018-02-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人