九段刀客
你期待的并且相信的,终将实现!
展开
-
react-native路由跳转传参和参数的获取
react原创 2022-11-29 17:16:44 · 151 阅读 · 0 评论 -
react-native引入react-native-vector-icons
1、安装依赖yarn add react-native-vector-icons2、Android代码添加配置android/build.gradle下添加project.ext.vectoricons = [ iconFontNames: [ 'MaterialCommunityIcons.ttf','MaterialIcons.ttf','AntDesign.ttf' ] // 指定要使用的字体库。]apply from: "../../node_modules/react-na原创 2021-08-06 15:46:06 · 496 阅读 · 0 评论 -
react-native 实现扫码功能 基于 vision-camera-code-scanner、react-native-vision-camera、react-native-reanimated
react-native扫描二维码原创 2023-05-17 19:31:05 · 1800 阅读 · 6 评论 -
react-hook-form手动清空校验显示
【代码】react-hook-form手动清空校验显示。原创 2023-01-10 14:21:09 · 440 阅读 · 0 评论 -
react-native文件上传
【代码】react-native文件上传。原创 2023-01-07 11:17:01 · 352 阅读 · 1 评论 -
react和react-native中redux @reduxjs/toolkit的使用
redux的使用原创 2022-12-20 18:15:21 · 74 阅读 · 0 评论 -
react-native 头部tab切换可以实现滑动切换功能
【代码】react-native 头部tab切换可以实现滑动切换功能。原创 2022-11-25 12:29:44 · 393 阅读 · 0 评论 -
安装动画插件报错Error: Failed to initialize react-native-reanimated library, make sure you
react-native清空缓存原创 2022-11-24 15:10:14 · 365 阅读 · 0 评论 -
react-native 列表插件@shopify/flash-list实现下拉水波效果
列表下拉原创 2022-11-24 12:11:05 · 173 阅读 · 0 评论 -
react-native非路由组件中实现路由跳转
使用场景:对请求进行封装,要在封装的逻辑中进行退出登录,跳转到login页面的功能APP.js。原创 2022-11-22 16:55:03 · 433 阅读 · 0 评论 -
react-native 底部标签导航
【代码】react-native 底部标签导航。原创 2022-11-17 14:26:10 · 61 阅读 · 0 评论 -
解决react-native TextInput导致不能滑动问题
这是react-native的一个bug,GitHub issue 里很多人都遇到过,react-native:0.64.2添加属性multiline = true原创 2021-08-20 10:18:56 · 410 阅读 · 0 评论 -
react-native收起键盘
import {Keyboard} from 'react-native';Keyboard.dismiss();原创 2021-08-17 10:34:50 · 572 阅读 · 0 评论 -
解决react-native打包后请求不到http
添加原创 2021-08-12 19:23:06 · 787 阅读 · 2 评论 -
react 中实现类似vue中的watch
初始化的时候会执行,值发生改变时也会执行useEffect(() => { console.log(SkipCount, '=='); }, [SkipCount]);原创 2021-08-12 18:05:39 · 1389 阅读 · 0 评论 -
@ant-design/react-native 图标中文问题
需要手动link原创 2021-08-12 16:33:45 · 214 阅读 · 0 评论 -
react 函数组件中实现类似vue的slot功能,并用createContext、useContext来实现跨组件通信
背景介绍(赶时间可以略过):简单介绍一下我的使用场景,在react-native中用native-base和react-hook-form开发表单验证功能,跟web中不一样不能直接用 <input {...register("name")} />这种方式,需要套一层Controller,效果大概是这样的,这都只是我简写后的很多属性都没有放出来,而且这一套操作下来,只是一个字段,没办法了只能封装<FormControl ><FormControl.Label>labe.原创 2021-08-11 14:01:34 · 628 阅读 · 0 评论 -
react-native 监听页面的显示和隐藏
import React, {useState, useEffect, useCallback} from 'react';import {useFocusEffect} from '@react-navigation/native'; useFocusEffect( useCallback(() => { console.log('显示'); return () => { console.log('隐藏'); }; },原创 2021-08-10 15:59:59 · 2094 阅读 · 0 评论 -
react-native实现底部阴影,不需要外部依赖
const styles = StyleSheet.create({ headerSearch: { shadowColor: '#000', shadowOffset: {width: 1, height: 1}, shadowOpacity: 0.4, shadowRadius: 3, elevation: 5, },});原创 2021-08-10 15:24:25 · 277 阅读 · 0 评论 -
react-native函数组件中使用redux
yarn add reduc react-reduxredux代码import { createStore } from "redux";function countFn(state = { count: 1 }, action) { switch (action.type) { case "PLUSH": console.log("=="); return { count: state.count + 1 }; case "REMOVE": .原创 2021-08-06 00:20:51 · 175 阅读 · 0 评论 -
Delete `␍`eslint (prettier/prettier)
1、修改vscode插件2、修改prettierrc.js配置文件module.exports = { bracketSpacing: false, jsxBracketSameLine: true, singleQuote: true, trailingComma: 'all', arrowParens: 'avoid', endOfLine: 'auto',};原创 2021-08-09 10:54:29 · 1541 阅读 · 0 评论 -
react-native @react-navigation5 页面左右切换动画
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,import { createStackNavigator, CardStyleInterpolators} from "@react-navigation/stack";<Stack.Navigator initialRouteName="Login" screenOptions={{ title: "Home页面"原创 2021-08-09 00:20:53 · 628 阅读 · 0 评论 -
react-native 中 react-hook-form表单验证
官方文档地址:https://react-hook-form.com/api/useform/register1、rules的所有类型requiredmaxLengthminLengthmaxminPatternvalidate2、多msg判断可对照后面的完整代码查看rules={{ required: true, validate: () => { if (getValues("firstName").length < 4) {原创 2021-08-06 10:54:16 · 1228 阅读 · 0 评论 -
React Native 设置状态栏颜色
在App.js中添加即可import { StatusBar } from "react-native";<StatusBar barStyle="light-content" backgroundColor="#7b1fa2" />原创 2021-07-31 13:39:48 · 1383 阅读 · 0 评论 -
React Native实现渐变色
安装依赖yarn add react-native-linear-gradient实现import LinearGradient from "react-native-linear-gradient";<LinearGradient colors={["#303f9f", "#7b1fa2"]}>//其他代码</LinearGradient>原创 2021-07-31 09:26:46 · 1213 阅读 · 0 评论 -
react-native路由react-navigation 5版本,安装和使用
最好的文档是官方的https://reactnavigation.org/docs/getting-started安装依赖React Native 0.60和更高版本已经不需要link了yarn add @react-navigation/nativeyarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-.原创 2021-07-21 11:14:33 · 385 阅读 · 0 评论 -
react-native配置相对路径@
安装插件npm install babel-plugin-root-import --save-dev跟目录新增.babelrc文件{ "plugins": [ ["babel-plugin-root-import",{ "rootPathPrefix": "@", "rootPathSuffix": "./src" }] ]}原创 2021-07-19 14:26:23 · 701 阅读 · 1 评论 -
React Native学习笔记三:使用组件引入方式写Hello World
App.jsconst App = () => { return ( <View> <Header /> </View> );};export default App;Header.jsimport React from 'react';import {View, Text, StyleSheet} from 'react-native';const Header = () => { return .原创 2021-07-14 19:30:08 · 132 阅读 · 0 评论 -
React Native学习笔记一:环境搭建、创建和启动项目
初始化npx react-native init AwesomeProject原创 2021-07-14 17:16:17 · 275 阅读 · 0 评论