基于react native的简单手动切换功能示例
    		       		warning:
    		            这篇文章距离上次修改已过448天,其中的内容可能已经有所变动。
    		        
        		                
                
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的状态,并在状态改变时更新文本显示的内容。
评论已关闭