如何创建带有Man、Woman两种字符串状态的Switch切换组件？

直接用自定义组件来实现，既能支持自定义文本、调整尺寸，还能加上平滑的切换动画。下面是React Native环境下的实现代码：

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, TouchableOpacity, Animated, StyleSheet } from 'react-native';

const GenderSwitch = () => {
  const [selectedGender, setSelectedGender] = useState('man');
  const slideAnim = useRef(new Animated.Value(0)).current;

  // 切换性别时触发滑动动画
  useEffect(() => {
    Animated.timing(slideAnim, {
      toValue: selectedGender === 'woman' ? 1 : 0,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }, [selectedGender, slideAnim]);

  const indicatorStyle = {
    transform: [
      {
        translateX: slideAnim.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 100], // 对应单个按钮的宽度，按需调整
        }),
      },
    ],
  };

  return (
    <View style={styles.container}>
      {/* 滑动指示器 */}
      <Animated.View style={[styles.indicator, indicatorStyle]} />
      {/* Man按钮 */}
      <TouchableOpacity
        style={styles.button}
        onPress={() => setSelectedGender('man')}
      >
        <Text style={[styles.buttonText, selectedGender === 'man' && styles.selectedText]}>
          Man
        </Text>
      </TouchableOpacity>
      {/* Woman按钮 */}
      <TouchableOpacity
        style={styles.button}
        onPress={() => setSelectedGender('woman')}
      >
        <Text style={[styles.buttonText, selectedGender === 'woman' && styles.selectedText]}>
          Woman
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 200, // 组件总宽度，可自定义
    height: 40, // 组件高度，可自定义
    borderRadius: 20,
    backgroundColor: '#f0f0f0',
    flexDirection: 'row',
    position: 'relative',
    overflow: 'hidden',
  },
  indicator: {
    position: 'absolute',
    width: 100, // 单个按钮宽度，和总宽度对应
    height: '100%',
    borderRadius: 20,
    backgroundColor: '#007AFF', // 指示器背景色
    zIndex: 0,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1, // 确保按钮在指示器上方
  },
  buttonText: {
    fontSize: 16, // 文本大小，可自定义
    color: '#666',
  },
  selectedText: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

export default GenderSwitch;

关键说明： #

• 滑动动画通过Animated.timing实现，切换性别时自动触发，时长可通过duration调整
• 组件的宽高、颜色、文本样式都能通过修改styles里的参数自由定制
• 两个按钮平分容器宽度，点击后切换选中状态，同步更新文本颜色和指示器位置
• 如果需要更丝滑的动画效果，可以替换成react-native-reanimated库来实现

内容的提问来源于stack exchange，提问作者Rendivy