如何使單選按鈕成為本機？

Question

我正在制作一個反應本機應用程序，我需要在其中進行這樣的設計。在圖像中我有行中的單選按鈕。如何在反應原生中實現類似。

https://imgur.com/a/jJ0GNTz

目前我正在使用包react-native-flexi-radio-button

這是我的代碼。

<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>

我嘗試了可能的方法，但無法在設計中實現。我也嘗試將flexDirection設置為Row但這也不起作用。我也使用了其他包。我是新的反應本機應用程序開發所以請善意地制作我的概念明確。謝謝。

Answer 1

查看庫源代碼，看起來您需要將flex參數應用於無線電組而不是周圍的容器。

例：

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

Answer 2

我不知道它是否適用於你正在使用的包，但通常你可以這樣：

<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：“space-between”（例如）。

希望這可以幫助！

反應本機元素也有很好的單選按鈕，它就像這樣工作100％