react native
文章平均质量分 53
未金涛
走着走着就迷路了
展开
-
记一次react native面试
1、在页面上隐藏元素的方法有哪些?解析首先我们要从多个纬度来回答这个:css、vue、react、react native。同时也需要简单的说明不同方式的差异。答案css可以使用visibility属性visible默认值。元素是可见的。hidden元素是不可见的。collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。inherit原创 2021-08-07 00:31:32 · 757 阅读 · 0 评论 -
react native selectable={true} 在 android无法复制
方案1<Text selectable={true} key={Math.random()}> {text}</Text>方案2备用方法2:FlatList 设置 removeClippedSubviews={false}参考https://stackoverflow.com/questions/33728469/how-to-touch-and-hold-to-select-text-in-react-nativehttps://github.com/f原创 2021-09-16 09:58:54 · 461 阅读 · 0 评论 -
victory native 血泪史,你可能踩进去就爬不出来的坑 TypeError: Super expression must either be null or a function
前言事情是这样的,由于本人特别爱频繁的提交代码。所以,自己单独建了一个仓库。今天,在把代码合并到最终项目的仓库里的时候,遇到个奇葩的问题,同样的代码合并过来居然跑不起来。总是提示:# TypeError: Super expression must either be null or a function,让我从最开始的稳如老狗,慢慢的开始抓狂。到最后,实在是没办法,只能把代码一行行的复制过来,一行一行的排查问题。最后,才发现是一个社区组件victory native的问题。作为一名老司机,笔者我第一时原创 2021-08-27 10:00:01 · 321 阅读 · 0 评论 -
Redux Toolkit 使用笔记
概述使用Redux ToolKit简化了传统redux创建的流程及代码量;借助createReducer和createSlice这两个钩子函数让我们更轻易的CRDU全局状态,同时在中间件中默认配置了thunk。基础依赖包安装yarn add @reduxjs/toolkit react-redux redux-loggerstore//参考: https://redux-toolkit.js.org/api/configureStoreimport { configureStore }原创 2021-08-11 10:32:25 · 760 阅读 · 0 评论 -
react natie配置自定义路径别名
配置自定义路径别名1、编辑您tsconfig.json的自定义路径映射。将 的根目录中的任何内容设置src为可用,无需前面的路径引用,并允许使用test/File.tsx以下命令访问任何测试文件:{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx":原创 2021-08-10 20:57:05 · 648 阅读 · 0 评论 -
React Native Android端打包问题汇总笔记
android打包笔记参考打包APKkeytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (拒绝访问)..\keytool -genkeypair -v -keystore c:/my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000Warning:JKS 密钥库使用专用格式。建议使用 “keytoo原创 2021-07-31 04:41:28 · 705 阅读 · 0 评论 -
在react native中使用 react navigation 头部标签栏自定义按钮时的思考
参考react navigation官方文档问题问题1:由于缺失了头部标签栏高度的高度所导致的,页面内容在不同设备上的设备。问题2:如果,说将头部标签栏的重写到Stack里,就出现了一个问题。你重写的按钮在使用时,无法直接访问到页面的数据。一般的方式是,先将页面的数据先放到全局的state里,你需要使用到 redux或mobx这样的全局状态管理的组件。个人觉得这样做产生了不必要的性能消耗,同时也挺复杂的。前言当我想要在头部标签栏自定义一个按钮时,遇到一个焦灼的问题。原创 2021-07-13 22:36:29 · 758 阅读 · 5 评论 -
react native 不同分辨率、dpi适配思考
屏幕适配理论知识React native 分辨率适配(px,dp)react-native android 适配全面屏手机原创 2021-07-13 21:07:10 · 1938 阅读 · 0 评论 -
react native基于react-native-image-crop-picker 实现的视频多选
1 参考react-native-image-crop-picker Github仓库地址2 效果3 前言主要是使用到了lodash 给的chunk 对数组进行了处理,然后使用map遍历数组循环创建你选中的内容。4 源码/** * 多选 图片、视频 */import React, { useState, useEffect } from 'react';import { View, TouchableOpacity, Image } from 'react-nativ原创 2021-07-13 17:53:44 · 396 阅读 · 0 评论 -
react native基于react-native-image-crop-picker实现的自制图片选择
参考react-native-image-crop-picker 官方参考效果展示前言使用这个react-native-image-crop-picker组件是因为这个组件功能更加强大。自带了图片剪切,IOS端视频压缩。当前的实现仅能选择一张图片,通过回调的方式返回图片的信息对象。返回结果实例:{height: 388,mime: "image/png",modificationDate: "1626168615000",path: "file:///data/user/0/原创 2021-07-13 17:43:46 · 478 阅读 · 0 评论 -
我对React Native 的一些看法
RN 简介React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。同时使用RN可以一次编写,得到兼容android和ios端的项目。什么样的公司在用这个技术我就感觉国内都是些小公司在用这个原创 2021-06-28 15:53:11 · 196 阅读 · 0 评论 -
Teaset使用笔记
title: Teasettags:Teaset等待框安装npm install --save teaset简单的列子import React from 'react';import {ActivityIndicator} from 'react-native';import {Toast, Theme} from 'teaset';let customKey = null;// 打开Toast.showLoading = (text) => { if (cus.原创 2021-06-20 16:39:03 · 706 阅读 · 0 评论 -
react native ffmpeg 视频处理
1 FFmpegKit说明https://github.com/tanersener/ffmpeg-kit构建 FFmpeg 库的脚本FFmpegKit在应用程序中运行FFmpeg/FFprobe命令的包装库支持安卓、iOS、macOS 和 tvOS基于v4.4-dev带有可选系统和外部库的FFmpegGithub、Maven Central和CocoaPods 上提供了 8 个预构建的二进制包。根据 许可LGPL 3.0,或者GPL v3.0如果启用了 GPL 许可的库2 Androi原创 2021-06-11 14:02:36 · 1783 阅读 · 2 评论 -
基于react native video 实现的一个播放器
前言1.基于react-native-video实现的一个播放器。2.引用react-native-vector-icons作为图标3.使用react-native-orientation-locker库,基于样式调整实现竖屏、横屏。4.使用@react-native-community/slider实现播放进度条5.实现了进度条选定区域循环播放基础环境描述RN 版本0.64效果展示后期计划如果有时间的话,希望可以把这个播放器做的跟哔哩哔哩一样。已知bug在小米手机原创 2021-06-07 14:05:36 · 352 阅读 · 0 评论 -
React Native使用PanResponder实现3个点的Slider
回到拖动前的位置 ax += x; console.log(ax); //回到开始的点 if (ax < 0) { console.log('回到原点'); ax -= x; Animated.spring(this.panA, { toValue: { x: Math.abs(x), y: 0 }, useNativeDriver: true }).原创 2021-06-07 11:01:30 · 357 阅读 · 0 评论 -
react native 引入 ant组件
前言官方文档地址:https://rn.mobile.ant.design/index-cn官方github仓库地址:https://github.com/ant-design/ant-design-mobile-rn项目目前维护情况Ant Design React Native 版本从 3.x 版本开始蚂蚁金服不再维护该项目,现在由我 Github 维护不过从github仓库的提交频率上,这个仓库目前还是维护的比较频繁的。安装npm install @ant-design/react原创 2021-05-18 11:15:02 · 412 阅读 · 2 评论 -
react native集成redux、react navigation、axios、react native element的一个demo
1.前言:react native 版本:0.64redux: 官方推荐的全局数据管理的组件。保存的数据会在一下2个情况被销毁:APP被后台杀死、手机重启。react navigation: 官方推荐的路由及底部菜单栏实现axios:官方推荐的一个http请求库react native element:一个目前在github星星数量最多的一个UI库官方文档参考地址:2.基础组件的安装及文档参考地址2.1 React Native Elements安装yarn add reac原创 2021-05-17 11:37:16 · 258 阅读 · 7 评论 -
react native redux 的简单实现小demo
参考https://cn.redux.js.org/docs/basics/Actions.htmlhttps://www.love85g.com/?p=1595需要安装的依赖redux react-reduxactionactionTypeexport const SET_USER = 'SET_USER'actionimport * as ACTION_TYPE from './actionType';export const updateUser = (data)原创 2021-05-12 14:21:17 · 196 阅读 · 0 评论 -
react native调试时检查network 网络连接
注意:使用 Chrome 调试目前无法观测到 React Native 中的网络请求,你可以使用第三方的react-native-debugger来进行观测。react-native-debuggerreact-native-debugger github地址下载地址:https://github.com/jhen0409/react-native-debugger/releases开启网络监控通过修改配置文件中的defaultNetworkInspect选项(将永久启用网络检查)。设置为t原创 2021-05-06 09:46:21 · 1213 阅读 · 5 评论 -
react-native-picker选择器
title: react-native-picker选择器tags:选择器react-native-pickerpickerreact-native-picker选择器说明这是一个多级选择器安装 npm install react-native-picker --save // 选择城市 pickerShow = () => { let data = [ { a: [ { a1: [1.原创 2021-04-15 17:32:59 · 955 阅读 · 0 评论 -
eact-native-linear-gradient
title: react-native-linear-gradienttags:渐变gradientuireact-native-linear-gradient说明npm参考android安装npm install react-native-linear-gradient --save在 android/settings.gradleinclude ':react-native-linear-gradient'project(':react-native-linear-g.原创 2021-04-15 15:03:42 · 168 阅读 · 0 评论 -
react-native-location获取手机定位
title: react-native-location获取手机定位tags:定位locationreact-native-location简介一个用于获取手机定位的react native 第三方组件官方参考安装npm install --save react-native-locationoryarn add react-native-location链接库android/settings.gradleinclude ':react-native-locati.原创 2021-04-15 15:03:20 · 1153 阅读 · 1 评论 -
react-native-svg-uri
title: react-native-svg-uritags:svgreact-native-svg-uri官方说明安装npm install react-native-svg react-native-svg-uri --savenpm i react-native-svgLinkreact-native link react-native-svg原创 2021-04-15 15:03:04 · 425 阅读 · 0 评论 -
ReactNativeContacts使用说明
title: ReactNativeContacts使用说明tags:ReactNativeContacts通讯录ReactNativeContacts[GitHub仓库地址]](https://github.com/morenoh149/react-native-contacts)ReactNativeContacts说明借助这个组件可以对手机通讯录,进行增、删、改、查。安装npmnpm install react-native-contacts --saveyar.原创 2021-04-15 15:02:41 · 496 阅读 · 0 评论 -
React Native Image Picker 我在使用过程遇到的问题的笔记
title: React Native Image Pickertags:- image- 选择图片- 照相机- camera注意我当前使用的react native 版本为:"react-native": "0.63.4"React Native Image Picker 简介这是要给用于选择手机上的图片或视频的组件安装npm i react-native-image-picker链接库android\settings.gradleinclude ':react-n.原创 2021-04-15 15:02:08 · 478 阅读 · 0 评论 -
react-native-datepicker 使用
title: react-native-datepicker 使用tags:- time- datepicker- 时间选择器react-native-datepicker使用说明Installnpm install react-native-datepicker --saveOr using react-native-ui-xg, our react-naitve ui kit.npm install react-native-ui-xg --saveExamplimport R.原创 2021-04-12 11:01:47 · 316 阅读 · 0 评论 -
react-native-confirmation-code-field
title: react-native-confirmation-code-fieldtags:code验证码react-native-confirmation-code-fieldnpm参考https://snack.expo.io/Zil!jCFftandroid安装npm i react-native-confirmation-code-field原创 2021-04-12 11:01:32 · 446 阅读 · 0 评论 -
React Native调试工具安装(React Devtools、react-native-debugger)
title: 安装React Devtools调试工具tags:ReactDevtoolsDevtoolsReact Native 调试安装React Devtools调试工具在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具Download the React DevTools for a better development experience: https://fb.me/react-devtools记录下我安装React Devto.原创 2021-04-12 10:20:11 · 1310 阅读 · 0 评论 -
ReactNativeElements组件入门
title: ReactNativeElementstags:ReactNativeElementsReactNativeElementshttps://reactnativeelements.com/docs/安装npm install react-native-elementsnpm i --save react-native-vector-iconslinkreact-native link react-native-vector-icons// 进入android/app.原创 2021-04-12 10:19:47 · 576 阅读 · 0 评论 -
ReactNavigation页面路由
title: ReactNavigationtags:ReactNavigationreact 路由路由ReactNavigation 页面路由https://reactnavigation.org/安装npm install @react-navigation/nativenpm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-.原创 2021-04-12 10:19:17 · 114 阅读 · 1 评论 -
React Native入门笔记
title: React Nativetags:React NativeReact Native笔记vscode 插件Prettier - Code formatterSimple React SnippetsReact Native基础命令#打开手机debug模式adb shell input keyevent 82# React Native 脚手架npm install -g react-native-cli#初始化一个新的项目npx react-native.原创 2021-04-12 10:18:48 · 87 阅读 · 0 评论 -
react-native-amap-geolocation高德地图
title: react-native-amap-geolocationtags:react-native-amap-geolocation高德地图地图mapreact-native-amap-geolocationNPM参考官方参考文档简介使用高德地图api在程序中获取定位安装npm i react-native-amap-geolocationsettings.gradleinclude ':react-native-amap-geolocation'proj.原创 2021-04-12 11:01:13 · 266 阅读 · 0 评论 -
Promise笔记
titile: Promise笔记tags:promisePromise笔记import Axios from 'axios';export default { // 经纬度反向解析 regeo(params) { return new Promise((resolve, reject) => { Axios({ method: 'get', url: 'https://restapi.amap.com/v3/geocode.原创 2021-03-28 11:16:49 · 68 阅读 · 0 评论 -
Mock使用说明
title: Mock使用说明tags:Mock模拟Mock使用说明官方文档简书-使用说明CSND-使用说明安装npm install mockjs使用直接在reques 入口文件中引入就行了require('../../../mock/index')原创 2021-03-28 11:15:48 · 91 阅读 · 0 评论 -
Mobx
title: Mobxtags:MobxMobxmobox 核心库mobox-react@babel/plugin-proposal-decoratorsyarn add mobx mobx-react @babel/plugin-proposal-decorators在babel.config.js添加以下配置plugins:[ ['@babel/plugin-proposal-decorators',{'legacy':true}]]新建文件 mobx\i.原创 2021-03-28 11:15:12 · 117 阅读 · 0 评论 -
React Native 造轮记
title: React Native 造轮记tags:React Native 搭建开发环境wheelReact Native 造轮记官方说明官方参考React Native调用原生组件结论造不出来原创 2021-03-28 11:14:31 · 47 阅读 · 0 评论 -
React Native 搭建开发环境
title: React Native 搭建开发环境tags:React Native 搭建开发环境install安装React Native 搭建开发环境react native 官方参考JDKJava SE Development Kit (JDK)官网Java SE Development Kit (JDK)下载地址https://download.oracle.com/otn/java/jdk/8u281-b09/89d678f2be164786b292.原创 2021-03-28 11:13:49 · 205 阅读 · 0 评论 -
Genymotion使用笔记
title: Genymotion安装apptags:Genymotioninstall安装Genymotion安装app放弃了Genymotion模拟器使用的是x86架构,在第三方市场上的应用有部分不采用x86这么一种架构,所以在编译的时候不通过,报“APP not installed”,可以下载Genymotion提供的ARM转换工具包,将应用市场中的ARM架构的apk转换成Genymotion可以编译的x86架构;ARM Translation 下载https://590m..原创 2021-03-28 11:13:06 · 210 阅读 · 0 评论 -
react native 引入第三方组件常见问题分析
前言react native 是Facebook开源的一款用于开发跨平台APP的框架。由于,官方给到的组件有限。在开发过程中我们会使用到一些第三方开源的组件。这个时候会遇到一个特别恶心的问题,就是第三方组件和reac native框架版本不匹配的问题。下面以我在Android开发下引入组件做为例子,阐述说明其中会遇到的问题。引入组件在引入一个第三方组件时。一般来说是有3个步骤的:第一步安装,第二步链接组件,第三步在AndroidManifest.xml里配置相应的权限。安装npm inst原创 2021-03-12 23:18:51 · 643 阅读 · 0 评论 -
React Native Image Picker爬坑记
React Native Image Picker 简介这是要给用于选择手机上的图片或视频的组件使用过程中可能会遇到的问题1、报错 提示 image-picker 和 sdk 版本问题 ,可以打开你项目下android/app/src/main/AndroidManifest.xml文件添加以下两行代码:xmlns:tools="http://schemas.android.com/tools"<uses-sdk tools:overrideLibrary="com.imagepick原创 2021-03-12 13:03:32 · 388 阅读 · 0 评论