使按钮组看起来像单选按钮

Question

是否可以通过任何方便的方式执行与附加图像类似的操作？ 我需要按钮组进行单选，并在点击时保持专注。

Answer 1

我将给你一个简单的答案，它看起来不像预期的结果，但会有几个CSS调整。

创建一个null组件，该组件接受Option列表以及将报告您所选选项的函数。

options

现在在<Option options={['A', 'B', 'C', 'D']} onChange={(option) => { console.log(option); }} /> 组件内部，您可以创建一个类似的组件

Option

此代码现在非常混乱，您可以使用class Option extends Component { constructor(props) { super(props); this.state = { activeOption: this.props.options[0], }; } updateActiveOption = (activeOption) => { this.setState({ activeOption, }); }; render() { return ( <View style={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap', marginTop: 100, marginBottom: 100, }} > {this.props.options.map((option, index) => ( <TouchableOpacity onPress={() => { this.props.onChange(option); this.updateActiveOption(option); }} > <Text style={{ width: 150, borderWidth: 1, height: 50, color: this.state.activeOption === option ? 'red' : 'black', }} > {option} </Text> </TouchableOpacity> ))} </View> ); } } 对象将其整理好。

以下是现在的样子：