如何在 React Native 中使用 Animated.View 制作切换按钮？

Question

我只能在项目中使用react native，我需要用AnimatedView制作一个Toggle组件。我尝试使用 React Native Switcher，但它不会同时响应移动和网络。

这是我的代码

export const ToggleButton = () => {
const [isEnabled, setIsEnabled] = useState(false);
const [text, setText] = useState('');
const toggleSwitch = () => {
if (isEnabled) {
  setText('OFF');
} else {
  setText('ON');
}
setIsEnabled(previousState => !previousState);
};
 return (
<View style={styles.container}>
  <View>
    {isEnabled ? <Text style={styles.textOn}>On</Text> : <Text style={styles.textOff}>Off</Text>}
    <Switch
      trackColor={{ false: Colors.BlueLight, true: Colors.PurpleLight }}
      thumbColor={isEnabled ? Colors.BlueLight : Colors.BlueLight}
      ios_backgroundColor="#3E3E3E"
      onValueChange={toggleSwitch}
      value={isEnabled}
    />
  </View>
</View>
);
};

有人给我建议如何做？

Answer 1

嘿，我终于做了一个自定义开关，请查看：

请查看此博览会https://snack.expo.dev/@gaurav1995/gnarly-sandwich

它完全是用 React Native 构建的，没有外部库等

如果有任何疑问请告诉我:)

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


export default function App() {

    const positionButton = useRef(new Animated.Value(0)).current;

  const [isOn, setIsOn] = useState(false);

  const startAnimToOff = () => {
    Animated.timing(positionButton,{
      toValue:0,
      duration:500,
      easing:Easing.ease
    }).start()
  };

  const startAnimToOn = () => {
 Animated.timing(positionButton,{
      toValue:1,
      duration:500,
      easing:Easing.ease
    }).start()

  };

  const positionInterPol = positionButton.interpolate({inputRange:[0,1],outputRange:[0,30]})

  const backgroundColorAnim = positionButton.interpolate({inputRange:[0,1],outputRange:["#767577","#81b0ff"]})

  const initialOpacityOn = positionButton.interpolate({inputRange:[0,1],outputRange:[0,1]})

    const initialOpacityOff = positionButton.interpolate({inputRange:[0,1],outputRange:[1,0]})

  const onPress = () => {
    if (isOn) {
      startAnimToOff();
      setIsOn(false);
    } else {
      startAnimToOn();
      setIsOn(true);
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={{height:30,width:60}}  activeOpacity={0.9} onPress={onPress} >
      <Animated.View style={[styles.mainStyes,{
        backgroundColor:backgroundColorAnim
      }]} >
        <Animated.Text
          style={[
            styles.eahcStyles,
            {
              opacity: initialOpacityOn,
            },
          ]}>
          ON
        </Animated.Text>
        <Animated.Text
          style={[
            styles.eahcStylesOf,
            {
              opacity: initialOpacityOff,
            },
          ]}>
          OFF
        </Animated.Text>
        <Animated.View style={[styles.basicStyle,{
          transform:[{
            translateX:positionInterPol
          }]
        }]} />
          </Animated.View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  basicStyle: {
    height: 20,
    width: 20,
    borderRadius: 20,
    backgroundColor: '#FFF',
    marginTop: 5,
    marginLeft: 5,
  },
  eahcStyles: {
    fontSize: 14,
    color: '#f5dd4b',
    position: 'absolute',
    top: 6,
    left: 5,
  },

  eahcStylesOf: {
    fontSize: 14,
    color: '#f4f3f4',
    position: 'absolute',
    top: 6,
    right: 5,
  },
  mainStyes: {
    borderRadius: 30,
    backgroundColor: '#81b0ff',
    height: 30,
    width: 60,
  },

  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});