如何在React Native中实现单选按钮

我正在将React代码转换为React Native。 所以我需要实现单选按钮。

Answer 1

您只需使用准系统RN即可轻松模仿单选按钮。 这是我使用的一个简单实现。 根据需要resize，颜色等。 它看起来像这样（带有不同的色调和一些文字）。 在顶部添加TouchableOpacity将其转换为执行某项操作的按钮。

 function RadioButton(props) { return (  { props.selected ?  : null }  ); } 

Answer 2

有一个名为react-native-radio-buttons的react-native组件可以完成你需要的一些工作：

Answer 3

这是创建radioButtons的另一种方式（ Source ，感谢php一步一步的通道）

方法1

 constructor(props) { super(props); this.state = { radioBtnsData: ['Item1', 'Item2', 'Item3'], checked: 0 } } 

---

 import { View, TextInput, TouchableOpacity } from 'react-native'; {this.state.radioBtnsData.map((data, key) => { return (  {this.state.checked == key ?   {data}  : {this.setState({checked: key})}} style={styles.btn}>  {data}  }  ) })} 

---

 const styles = StyleSheet.create({ img:{ height:20, width: 20 }, btn:{ flexDirection: 'row' } }); 

将图像放在img文件夹中

方法2

为新开发人员详细介绍了LaneRettig

感谢Lane Rettig

 constructor(props){ super(props); this.state = { radioSelected: 1 } } radioClick(id) { this.setState({ radioSelected: id }) } render() { const products = [{ id: 1 }, { id: 2 }, { id: 3 }]; return ( products.map((val) => { return (   { val.id == this.state.radioSelected ?  : null }   ) }) ); } 

Answer 4

您可以使用react-native-radio-input。 它的使用非常简单。

 import RadioGroup,{Radio} from "react-native-radio-input"; . . . //Receive the checked value (ES6 syntax) getChecked = (value) => { // value = our checked value alert(value) }        . .