React Native 紙 - 如何設計這個單選按鈕的樣式？

Question

好吧，我正在嘗試實現這種外觀，其中我的選項左對齊且 Paper 單選按鈕右對齊：

為此，我嘗試將 RadioButton 和答案 Text 包裝在同一個 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>

但是按鈕仍然保持合理且略低：

他們也太小了。 我嘗試提高文檔中提到的 style 屬性的高度，但這不起作用。

如何增大按鈕的大小並正確對齊它們？

Answer 1

rishikesh_07 答案很接近，但文本和單選按鈕沒有正確對齊，將 alignContent: center 添加到包裝文本的 View 做到了。

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

還有RadioButton.Item ，它無需編寫像上面那樣的樣板代碼即可完成所有這些工作。

來自文檔的示例：

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

Answer 2

做這個

   <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 會為您處理事情。