Question

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

当前我正在使用软件包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％。您可以在内部视图中添加一些宽度，也可以在顶部View中使用justifyContent：“ space-between”（例如）。

希望这会有所帮助！

react-native-elements也具有漂亮的单选按钮，并且可以100％像这样工作

如何使行中的单选按钮反应本机？

2 个答案: