Css React Native paper-如何设置此单选按钮的样式？

好的，我正在尝试实现这种外观，我的选项是左对齐的，纸张单选按钮是右对齐的：

为此，我尝试将RadioButton和答案文本包装在相同的TouchableOpacity中：

                                <TouchableOpacity
                                  style={[styles.answer, {flexDirection:'row'}]}
                                  key={index}
                                  onPress={() => handleOptionPress(answer.id, index)}>
                                  <Text style = {styles.bodyText}>{answer.value}</Text>
                                  <RadioButton.Android
                                    style={{height: 100}}
                                    uncheckedColor={"#F0F0F0"}
                                    color={'black'}
                                    value="first"
                                    status={
                                      answer.id === selectedAnswer ? 'checked' : 'unchecked'
                                    }
                                    onPress={() => handleOptionPress(answer.id, index)}
                                  />
                                </TouchableOpacity>

handleOptionPress（answer.id，index）}>
{answer.value}
handleOptionPress（answer.id，index）}
/>

但按钮仍然左对齐，并且略低：

它们也太小了。我试着在文档中提到的样式属性中增加高度，但这不起作用

如何增大按钮的大小并将其右对齐？

执行此操作

   <View style={{flexDirection:"row",alignItems:'center'}}>
      <View style={{flex:4}}>
      //Add Text component here
      </View>
      <View style={{flex:1}}>
      //your RadioButton compnent here
      </View>
    </View>

//在此处添加文本组件
//你的单选按钮组件在这里

---

不要使用TouchableOpacity包装整个内容，因为RadioButton为您处理内容。

rishikesh_07答案很接近，但文本和单选按钮没有正确对齐，因此在包装文本的视图中添加了alignContent:center

<View style={{ flexDirection: 'row', alignContent: 'center' }}>
                <View style={{ flex: 4, alignSelf: 'center' }}>
                  <Text>First</Text>
                </View>
                <View style={{ flex: 1 }}>
                  <RadioButton
                    value="first"
                    status={checked === 'first' ? 'checked' : 'unchecked'}
                    onPress={() => setChecked('first')}
                  />
                </View>
</View>

弗斯特
setChecked（'first'）}
/>

还有一个，它不需要像上面那样编写样板代码就可以完成所有这些

文档中的示例：

<RadioButton.Group onValueChange={value => setValue(value)} value={value}>
      <RadioButton.Item label="First item" value="first" />
      <RadioButton.Item label="Second item" value="second" />
</RadioButton.Group>

setValue（value）}value={value}>

您尝试过使用{flexDirection:'row'，alignItems:'center'}吗？您知道如何使单选按钮变大吗？