推荐使用:React Native Radio Buttons Group - 简单易用的复选按钮组件
warning:
这篇文章距离上次修改已过204天,其中的内容可能已经有所变动。
import React from 'react';
import { View } from 'react-native';
import RadioGroup from 'react-native-radio-buttons-group';
export default class App extends React.Component {
onSelect = (index, value) => {
console.log('Selected index: ', index, 'with value: ', value);
};
render() {
const radioButtons = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
];
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<RadioGroup
radioButtons={radioButtons}
onSelect={this.onSelect}
selectedIndex={0} // 默认选中第一个选项
/>
</View>
);
}
}
这段代码演示了如何在React Native应用中使用react-native-radio-buttons-group
组件来创建单选按钮。我们定义了一个选项列表,并将其作为radioButtons
属性传递给RadioGroup
组件。onSelect
回调函数会在选项变更时被调用,并打印出新选项的索引和值。selectedIndex
属性用于设置默认选中的选项。
评论已关闭