解释 ReactNative SwitchSelector 组件

react nativejavascriptmobile development更新于 2025/7/26 1:16:17

SwitchSelector 组件类似于单选按钮。它允许您选择 2 个以上的值。

要使用 SwitchSelector，您必须安装如下所示的软件包 −

npm i react-native-switch-selector --save-dev

基本的 SwitchSelector 如下所示 −

<SwitchSelector
   106
   React Native – Q&A
   options={youroptions}
   initial={0}
   onPress={value => console.log(`value selected is : ${value}`)}
/>

以下是 SwitchSelector 的一些重要属性 −

属性	说明
options	带有标签、值和 imageicon id 的数组必需。
initial	数组中将要选择的初始项。
value	onPress 事件中可用的开关值
onPress	带有回调函数的事件，当 Switch 发生更改时将被调用。
fontSize	要考虑的字体大小标签。
selectedColor	所选项目的颜色。
buttonColor	所选项目的背景颜色。
textColor	未选择项目的标签颜色。
backgroundColor	开关选择器组件的背景颜色。
borderColor	要为组件提供的边框颜色。

示例:SwitchSelector 的工作原理

要使用 SwitchSelector，我们必须按如下方式导入组件 −

import SwitchSelector from "react-native-switch-selector";

在 SwitchSelector 中，我们将显示两个选项:女性/男性。

在示例中，我们使用女性和男性图像，选项数组中也使用了相同的图像。

let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');
const images = {
   "female": female,
   "male": male,
};
const options =[
   { label: "Female", value: "f", imageIcon: images.female },
   { label: "Male", value: "m", imageIcon: images.male }
];

SwitchSelector 如下所示 −

<SwitchSelector
   initial={0}
   onPress={value => this.setState({ gender: value })}
   textColor='#ccceeaa'
   selectedColor='#7a44cf'
   buttonColor='#ccc'
   borderColor='#ccc'
   hasPadding
   options={options}
/>

以下是 SwitchSelector 的完整代码 −

示例

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";
let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');
const images = {
   "female": female,
   "male": male,
};
const options =[
   { label: "Female", value: "f", imageIcon: images.female },
   { label: "Male", value: "m", imageIcon: images.male }
];
export default class MySwitchSelectorComponent extends Component {
   render() {
      return (
         <SafeAreaView style={styles.container}>
            <SwitchSelector
               initial={0}
                  onPress={value => this.setState({ gender: value })}
                  textColor='#ccceeaa'
                  selectedColor='#7a44cf'
                  buttonColor='#ccc'
                  borderColor='#ccc'
                  hasPadding
                  options={options}
            />
         </SafeAreaView>
      )
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
});

输出

输出如下 −

示例 2:具有三个选项的 SwitchSelector

在下面的示例中，我们使用了三个选项 −

const options =[
   { label: "First", value: "a"},
   { label: "Second", value: "b" } ,
   { label: "Third", value: "c" }
];

显示三个选项的完整代码如下 −

示例

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";
const options =[
   { label: "First", value: "a"},
   { label: "Second", value: "b" } ,
   { label: "Third", value: "c" }
];
export default class MySwitchSelectorComponent extends Component {
   render() {
      return (
         <SafeAreaView style={styles.container}>
            <SwitchSelector
               initial={0}
               onPress={value => this.setState({ gender: value })}
               textColor='#ccceeaa'
               selectedColor='#7a44cf'
               buttonColor='#ccc'
               borderColor='#ccc'
               fontSize='30'
               hasPadding
               options={options}
            />
         </SafeAreaView>
      )
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1
   }
});