📌  相关文章
📜  如何使用 Material Design 库在 react-native 中创建切换开关?

📅  最后修改于: 2022-05-13 01:56:15.796000             🧑  作者: Mango

如何使用 Material Design 库在 react-native 中创建切换开关?

React Native 是 Facebook 开发的一个框架,用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初,Facebook 只开发了 React Native 来支持 iOS。但是,由于最近支持 Android 操作系统,该库现在可以为这两个平台呈现移动 UI。

方法:在本文中,我们将看到如何使用材料设计在 react-native 中创建切换开关。我们将使用react-native-paper库材料设计来创建它。

在这个项目中,每当切换开关时,都会出现一条警报消息,显示开关的状态。

下面是分步实现:

第 1 步:使用以下命令在 react-native 中创建一个项目:

npx react-native init DemoProject

第 2 步:使用以下命令安装 react-native paper:

npm install react-native-paper

第 3 步:在您的项目中创建一个组件文件夹。在 components 文件夹中创建一个文件 ToggleSwitch.js

项目结构:它看起来像这样。

示例:写下相应文件中的代码。在 ToggleSwitch.js 中,我们将从'react-native-paper'库中导入 Switch 组件。

ToggleSwitch.js
import React, {useState, useEffect} from 'react';
import { Text, View , StyleSheet, Alert} from 'react-native';
import { Switch} from 'react-native-paper' ;
  
const ToggleSwitchExample = () =>{
    const [switchOn, setSwitchOn] = useState(false)
  
    return(
        
            Toggle Switch
             {
                setSwitchOn(!switchOn)
                Alert.alert("Switch on : " + !switchOn)} }/>
        
    )
}
  
export default ToggleSwitchExample ;
  
const styles = StyleSheet.create({
     container:{
         padding:45,
         flexDirection:'row',
         justifyContent:'space-around'
     }
})


App.js
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import ToggleSwitchExample from './components/ToggleSwitch';
  
const App: () => Node = () => {
   return (
      
           
          
       
      
  );
};
  
export default App;


现在将此文件导入您的 App.js 文件

应用程序.js

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import ToggleSwitchExample from './components/ToggleSwitch';
  
const App: () => Node = () => {
   return (
      
           
          
       
      
  );
};
  
export default App;

运行应用程序的步骤:使用以下命令运行应用程序:

npx react-native run-android

输出: