切换选择器

适用于 React Native 的切换选择器。

切换选择器

切换选择器 - 自定义示例

安装

yarn add react-native-switch-selector

或

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

使用方法

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

const options = [
  { label: "01:00", value: "1" },
  { label: "01:30", value: "1.5" },
  { label: "02:00", value: "2" }
];

你还可以为每个选项添加 testID 和 accessibilityLabel：

const options = [
  { label: "01:00", value: "1", testID: "switch-one", accessibilityLabel: "switch-one" },
  { label: "01:30", value: "1.5", testID: "switch-one-thirty", accessibilityLabel: "switch-one-thirty" },
  { label: "02:00", value: "2", testID: "switch-two", accessibilityLabel: "switch-two" }
];

<SwitchSelector
  options={options}
  initial={0}
  onPress={value => console.log(`Call onPress with value: ${value}`)}
/>

自定义示例

<SwitchSelector
  initial={0}
  onPress={value => this.setState({ gender: value })}
  textColor={colors.purple} //'#7a44cf'
  selectedColor={colors.white}
  buttonColor={colors.purple}
  borderColor={colors.purple}
  hasPadding
  options={[
    { label: "Feminino", value: "f", imageIcon: images.feminino }, //images.feminino = require('./path_to/assets/img/feminino.png')
    { label: "Masculino", value: "m", imageIcon: images.masculino } //images.masculino = require('./path_to/assets/img/masculino.png')
  ]}
  testID="gender-switch-selector"
  accessibilityLabel="gender-switch-selector"
/>

属性

属性	类型	默认值	是否必需	说明
options	array	null	是	要渲染的选项数组。每个选项包含 label、value 以及可选的图标
options[].label	string	null	是	每个选项的标签文本
options[].value	string	null	是	每个选项的值
options[].customIcon	Jsx element 或 Function	null	否	每个选项的可选自定义图标
options[].imageIcon	string	null	否	每个选项的图片图标资源路径。渲染时与标签文本颜色相同
options[].activeColor	string	null	否	每个选项被选中时的颜色
options[].testID	string	undefined	否	用于测试的每个选项的测试 ID（例如，使用 Appium）
options[].accessibilityLabel	string	undefined	否	用于测试的每个选项的无障碍标签（例如，使用 Appium）
initial	number	-1	否	初始渲染时选中的选项索引
value	number	undefined	否	开关的值（将触发 onPress）
onPress	function	console.log	是	更改值后调用的回调函数
disableValueChangeOnPress	bool	false	否	当手动更改值时，禁用 onPress 调用
fontSize	number	null	否	标签文本的字体大小。如果为 null，则使用应用的默认字体大小
selectedColor	string	'#fff'	否	选中项的文本颜色
buttonMargin	number	0	否	选中项与组件边缘的边距
buttonColor	string	'#BCD635'	否	选中项的背景颜色
textColor	string	'#000'	否	未选中项的文本颜色
backgroundColor	string	'#ffffff'	否	组件的背景颜色
borderColor	string	'#c9c9c9'	否	组件的边框颜色
borderRadius	number	50	否	组件的边框圆角半径
hasPadding	bool	false	否	指示选项是否有内边距
animationDuration	number	250	否	动画持续时间（毫秒）
valuePadding	number	1	否	内边距大小
height	number	40	否	组件高度
bold	bool	false	否	指示文本是否为粗体
textStyle	object	{}	否	文本样式
selectedTextStyle	object	{}	否	选中项的文本样式
textContainerStyle	object	{}	否	文本（和图标）容器的样式 (TouchableOpacity)
selectedTextContainerStyle	object	{}	否	选中项的文本（和图标）容器的样式 (TouchableOpacity)
imageStyle	object	{}	否	图片样式
style	object	{}	否	容器样式
returnObject	bool	false	否	指示 onPress 函数是否返回整个选项对象而非 option.value
disabled	bool	false	否	禁用开关
borderWidth	number	1	否	定义边框宽度
testID	string	null	否	用于测试的测试 ID（例如，使用 Appium）
accessibilityLabel	string	null	否	用于测试的无障碍标签（例如，使用 Appium）

作者

• Lucas Santana Carneiro - jkdrangel
• Cássio Silva de Sá Santos - ssscassio
• 贡献者

贡献

我们始终欢迎贡献！请创建一个新的拉取请求。