小编Man*_*che的帖子

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

我只能在项目中使用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>
);
};
Run Code Online (Sandbox Code Playgroud)

有人给我建议如何做?

toggle togglebutton reactjs react-native

2
推荐指数
1
解决办法
2661
查看次数

标签 统计

react-native ×1

reactjs ×1

toggle ×1

togglebutton ×1