基于react native的简单手动切换功能示例
import React, { useState } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';
const ToggleSwitch = () => {
const [isEnabled, setIsEnabled] = useState(false);
return (
<View style={styles.container}>
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
/>
<Text style={styles.text}>{isEnabled ? '开启' : '关闭'}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
text: {
marginLeft: 10,
fontSize: 16,
},
});
export default ToggleSwitch;
这段代码展示了如何在React Native应用中使用Switch组件来创建一个简单的手动切换功能。代码使用了Hooks API中的useState
来管理Switch的状态,并在状态改变时更新文本显示的内容。
评论已关闭