React native 如何在react native中生成行中的单选按钮？

我正在制作一个react native应用程序，在其中我需要这样设计。在图像中，我的单选按钮排在第一行。如何在react native中实现类似的效果

目前我正在使用package

react native flexi单选按钮

这是我的密码

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <RadioGroup
    size={24}
    thickness={2}
    color='#0A0A0A'
    selectedIndex={0}
    style={{ marginRight: '80%', marginBottom: 10 }}
    onSelect = {(index, value) => this.onSelect(index, value)}>

    <RadioButton value={'cash'} >
      <Text style ={{ width: '100%' }}>COD</Text>
    </RadioButton>

    <RadioButton value={'online'}>
      <Text style ={{ width: '100%' }}>Online</Text>
    </RadioButton>

  </RadioGroup>

</View>

this.onSelect（索引、值）}>
货到付款
在线 的

---

我尝试过可能的方法，但在设计中无法实现。我也尝试过将flexDirection设置为Row，但这也不起作用。我还使用过其他软件包。我对react本机应用程序开发很陌生，所以请明确我的概念。提前感谢。

查看库源代码，看起来您需要将flex参数应用于无线电组，而不是周围的容器

例如：

<RadioGroup
  style={{flexDirection: "row"}}
  size={24}
  thickness={2} 
  color='#0A0A0A'
  selectedIndex={0}
/>

---

我不知道它是否适用于您正在使用的软件包，但通常您可以这样使用它：

<View style={{flexDirection: "row", width: "100%" }} >

<View style={{flex:1}} > Your radio button </View>
<View style={{flex:1}} > Your second radio button  </View>

</View>

你的单选按钮
你的第二个单选按钮

每个视图占行的50%。您可以为内部视图添加一些宽度，或者在顶视图中使用justifyContent:“间距”（例如）

希望这有帮助

---

另外，react native元素也有很好的单选按钮，100%都是这样使用的。

不知怎的，你的回答帮助了我：）