当前位置: 首页 > news >正文

解决 RN Switch 组件在安卓端样式很丑的问题

解决此种问题的方式有很多

  • 可以导入原生库react-native-switch

  • 切图 (会缺少动画)

  • 使用 js 组件

在这里插入图片描述

这里使用 js 绘制组件(原生体验)解决此类问题

Switch.tsx

import React, { useEffect, useRef, useState } from 'react';
import { Animated, Pressable, StyleSheet } from 'react-native';interface SwitchProps {value?: boolean;onChange?: (value: boolean) => void;
}const Switch: React.FC<SwitchProps> = ({ value = false, onChange }) => {const switchAnim = useRef(new Animated.Value(0)).current;const switchHandle = () => {onChange?.(!value);};useEffect(() => {const toValue = value ? 23 : 3;Animated.timing(switchAnim, {toValue,duration: 100,useNativeDriver: false, // 此处原生驱动会导致 ios 颜色显示不对}).start();}, [switchAnim, value]);const backgroundColor = switchAnim.interpolate({inputRange: [0, 25],outputRange: ['#D2D2D2', '#904FF5'],});return (<Pressable onPress={switchHandle}><Animated.View style={[styles.radioContainer, { backgroundColor }]}><Animated.View style={[styles.radio, { transform: [{ translateX: switchAnim }] }]} /></Animated.View></Pressable>);
};const styles = StyleSheet.create({radioContainer: {width: 52,height: 32,borderRadius: 17,justifyContent: 'center',marginRight: 5,},radio: {width: 25,height: 25,backgroundColor: '#FFFFFF',borderRadius: 15,},
});export default (props: SwitchProps) => {const [value, setValue] = useState(props.value || false);// 监听 props.value 的变化并更新内部状态useEffect(() => {setValue(props.value ?? false);}, [props.value]);return (<Switchvalue={value}onChange={() => {props.onChange?.(!value);}}/>);
};

用法

<Switch value={value} onChange={(value: boolean)=>{}} />
http://www.dtcms.com/a/165831.html

相关文章:

  • Databend 产品月报(2025年4月)
  • 人工智能数学基础(六):数理统计
  • 大屏/门户页面兼容各种分辨率或电脑缩放
  • 39.RocketMQ高性能核心原理与源码架构剖析
  • tailwindcss如何改变antd子组件的样式
  • CSS实现DIV水平与垂直居中方法总结
  • 基于单片机的音频信号处理系统设计(一)
  • 第十一节:Shell脚本编程
  • mysql模糊查询
  • terraform backend用途是最佳实践
  • Python网络爬虫核心技术拆解:架构设计与工程化实战深度解析
  • 牛客:AB5 点击消除
  • Linux Debugfs知识学习
  • 算法四 习题 1.3
  • 基于UNet算法的农业遥感图像语义分割——补充版
  • 基于用户画像的图书推荐与管理系统的实现
  • 03_spring配置优先级
  • 【人工智能】释放本地AI潜能:LM Studio用户脚本自动化DeepSeek的实战指南
  • uniapp 实现低功耗蓝牙连接并读写数据实战指南
  • 【Fifty Project - D21】
  • 阿里云服务器技术纵览:从底层架构到行业赋能​
  • 海外社交软件开发实战:从架构设计到合规落地的技术解析
  • 【数学建模国奖速成系列】优秀论文绘图复现代码(四)
  • C++漫游指南——字符串篇与内存分配篇
  • XML文件中`<![CDATA[...]]>` 的写法
  • 第五届图像、视觉与智能系统国际会议(ICIVIS 2025)参会通知
  • 【每日八股】复习 Redis Day3:Redis 的应用
  • 数据结构篇:线性表的另一表达—链表之单链表(下篇)
  • canvas动画:点随机运动 距离内自动连接成线 鼠标移动自动吸附附近的点
  • 销售与金融领域的数据处理与分析方法