gaokaikai1996的博客

原创 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...

原创 ReactNative选择头像裁剪截屏生成新头像并保存到本地

1.需求 需要根据不同等级展示不同的头像边框 用户可以选择头像 然后裁剪合成 变成带边框的头像 并且可以下载到本地2.实现思路 用户进来选择头像（使用react-native-image-crop-picker）之后 将头像和边框（react-native-view-shot）进行快照 保存到临时路径 点击下载 （使用@react-native-community/cameraroll）保存到本地相册 需要注意的是 图片加载需要时间所以要在图片加载完之后再进行快照3.具体实现1.用户选择头像

原创 ReactNative手动实现热更新

1.需求因公司业务需要，需要更新本地游戏html文件以及rn文件。2.实现原理加载app 比较本地版本和远程版本 如果远程版本高于本地版本第一次更新则下载一个zip包 里边包含最新的html和rn文件第二次更新通过比较本地的map文件(list文件包含所有的文件信息)和远程的map文件 比较差异来下载不同的文件更新完成写入成功文件 并且写入版本号重启app下次启动app就通过写入的版本号进行对比3.实现细节我们的html资源安卓需要放在asset目录下i.

原创 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...

原创 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"...

原创 ReactNative常用技巧

最近在做项目，趁机总结一下用到的知识点(欢迎大家补充)导航栏背景颜色安卓 <StatusBar barStyle="light-content" backgroundColor="#000000"/>ios 不支持背景色设置插件 react-native-statusbar-propsimport StatusBarProps from 'r...

原创 Xcode 查看ios崩溃日志

原创 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...

原创 ReactNative自定义原生模块 安卓

第一步 Android Studio打开项目 选择 File->New->New Module第二步 编写模块继承ReactContextBaseJavaModulepublic class RCTStatusbarPropsModule extends ReactContextBaseJavaModule{ private ReactApplicationContext co...

原创 Android Studio 准确查看日志的方法

在开发过程中，出现问题时我们需要看崩溃日志，可是有的程序崩溃后系统会做些操作，导致日志很快就被顶掉，导致我们看不到日志。这样在我们开发的时候就会造成很大困难。所以记录下我的解决方法。...

原创 React Native 常见问题(持续更新，欢迎补充)

萌新在学习React Native中，遇到了不少的问题，都心平气和(气的要死)的解决了，特此帮助一下其他的同学。错误一React.Children.only expected to receive a single React element child.这个问题我是在用Touchable相关组件的时候碰到的，意思是只接受一个子组件,在组件外套一个View标签就好了。错误二...

原创 React Native 中组件的生命周期

概述    React Native(RN)中的组件也有生命周期(Lifecycle)。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，对我们的开发很重要，对我们的开发很重要，对我们的开发很重要。(重要的事情说三遍，亲生经历，很重要)。贴个图，让大家理解一下有图有真相，组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段(图中的上方虚线框)，在这里执行组件的加载和...

原创 loading...字符变化动画

公司业务一个简单的需求loading...文字动画，不想用js实现，问过GPT后学习了css写法。需要添加文字动画的直接添加这个class就好了。

原创 算法题-快速排序

算法题-快速排序

原创 算法题-找出字符串中连续出现次数最多的字符

算法题-找出字符串中连续出现次数最多的字符

原创 前端项目 多语言工程化

前端项目 多语言工程化

原创 算法题-找出二叉树的第几个最小值

算法题-找出二叉树的第几个最小值

原创 算法题-有序的数字组合里查找和为特定值

算法题-有序的数字组合里查找和为特定值

原创 算法题-二分查找法

算法题-二分查找法

原创 算法题-用链表实现一个队列

算法题-用链表实现一个队列

原创 算法题-翻转链表

算法题-翻转链表

原创 算法题-定义一个数组 将数组翻转n步

定义一个数组 将数组翻转n步

原创 算法题-用两个栈实现队列

算法题-用两个栈实现队列

原创 算法题-检验某个字符串中括号是否匹配 {} [] ()

检验某个字符串中括号是否匹配 {} [] ()

原创 动力电池项目(前后台)总结

项目职责:1.独立负责该项目App的开发;2.独立负责该项目管理系统的开发;3.独立负责该项目接口的开发;5.独立负责该项目H5页面的开发;5.独立负责该项目调试、测试并打包上线;项目描述:为北京汽车技师学院做的一个动力电池项目分为管理系统和App。管理员可以上传、删除、修改、查看电池相关视频等信息，可以向App发送通知。App用户可以根据二维码查看电池相关信息。项...

原创 智慧车库项目总结

岗位职责:1、独立负责公司 ReactNative 应用程序的设计开发;2、负责调试并修改应用所存在的问题;3、负责接口调试及与公司其他同事技术交流;4、负责 ReactNative 开发工作计划安排及相关技术文档的书写;5、负责项目测试及打包上传至 AppStore;项目描述:为北京汽车技师学院做的一款教师、学生二合一的一款App。教师可以通过App对共享教学资源如共...

原创 解决Mac上adb: command not found问题

使用mac进行开发的时候，有时候需要使用adb指令来进行一些操作，但是如果没有配置过Android环境变量，可能会出现adb: command not found的问题，查了一些资料，这里记录一下mac上配置Android环境变量的方法：打开mac的terminal终端，输入 cd ~/ 【进入当前用户的home目录】输入 touch .bash_profile 【如果没有.bash_profil...

原创 Mac查看本机IP的终端命令

在Mac系统中,打开终端,输入命令ifconfig并按回车即可查看本机IP,如图:输入命令ifconfig en0也可以查看本机IP(最后是数字0,而不是字母O),如图:

原创 React native 之android的图标和启动图片

哎哎呀呀，上篇说到了react native的IOS的图标和启动图片的设置，其实最主要的是尺寸！相应的尺寸设定好了以后就不会报错了！ok~这篇说的是React native的android的图标和启动页面！！！！！1.图标：其实android的图标设置很简单，一般情况下只需要替换就可以了（当然你也可以不去替换，在资源管理的R.java里面设置也可以，这里不建议）图标规格 72 4...

原创 React native 之设置IOS的图标，名称和启动图

1.首先，app的名称：如图所示：我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息：比如Bundle name就是设置APP的名称2.App的图标：（这里注意的是：1.app的图标有尺寸之分，所以如果图片的尺寸不对，编译也就会失败！2.图标的圆角是系统自己设定的，也就是说，我们上传的图片是正正方方的！）如图：在工程文件下面的 images.xcassests的...

原创 ReactNative PanResponder 手势响应系统详解

我们知道，react-native封装了一系列的组件例如<Touchable**>来提供触摸事件的反馈，另外Button、Text等组件也提供了简单的点击方法来给组件快速添加触摸事件。但是这些组件都是针对某个特定的效果，因其是定制的，所以可自定义、调整的部分就会很少，至多是效果有个选项。那么，如果我们希望做复杂的效果，改怎么办呢？答案是panResopner。先看下panRespond...

原创 reactnative 在线编辑器地址

http://dabbott.github.io/react-native-web-player/

原创 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...

原创 调试React Native项目(webstorm)

第一步：下载安卓 React Developer Tools谷歌插件地址：http://blog.csdn.net/gaokaikai1996/article/details/79386992第二步：需要使用Debug模式启动react native项目第三步：在安卓设备上调出菜单 选择 Debug Js Remotely便会自动打开谷歌浏览器个人demo： http://www.chenzhuo...

原创 React调试工具:React Developer Tools 谷歌插件下载

由于谷歌应用商店需要翻墙，个人分享一下下载网址个人下载链接：http://download.csdn.net/download/gaokaikai1996/10261131网上下载链接：https://www.crx4chrome.com/crx/3068/个人demo： http://www.chenzhuo.ltd/loveshare/...

原创 webstorm 如何快速运行命令行命令

需求：用webstorm学习ReactNative 需要启动模拟器(Android Studio 中的模拟器) 步骤：1.打开Edit Configurations2.点击+号 选择npm3.如下图所示4.点击下边的+号 选择External tool5.如下图所示启动命令 C:\Users\Administrator\AppData\Local\Android\Sdk\tools\emulato...