反应本机开关 API

在本文中，我们将了解如何在 react-native 中使用 Switch。为此，我们将使用 Switch 组件。它是一个受控组件，需要一个回调函数来更新道具以显示用户的操作。

句法 ：

Switch中的道具：

• 已禁用：如果其值为 true，则用户将无法切换开关。
• ios_backgroundColor：仅适用于IOS。它基本上是针对 IOS 中的自定义背景颜色。
• onChange：当用户尝试更改开关的值时调用。它接收更改事件作为参数。
• onValueChange：当用户尝试更改开关的值时也会调用它。但它接收更改的值作为参数而不是事件。
• thumbColor：基本上是前景开关握把的颜色。
• trackColor：基本上就是切换轨道的颜色。
• value：开关的值。默认情况下，它是假的。

现在让我们从实现开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

项目结构：

示例：现在让我们实现 Switch。在这里，我们创建了一个开关，当有人切换开关时，开关的颜色和文本会发生变化。

应用程序.js

Javascript

import React , {useState} from 'react';
import {StyleSheet,
        Text,
        View,
        Switch
        } from 'react-native';
  
export default function App() {
  
  const [Enable , setEnable]  = useState(false);
    
  // Toggle function
  const toggle = (state)=>{
    setEnable(state);
  }
  
  return (
    
      
        GeeksforGeeks
      
      
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/switch