Блог

Хорошо, я пытаюсь добиться такого вида, при котором мои параметры выровнены по левому краю, а переключатели на бумаге выровнены по правому краю:

Чтобы сделать это, я попытался обернуть RadioButton и текст ответа в одну и ту же осязаемую область:

                                 <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, как указано в документах, но это не сработало.

Как я могу увеличить размер кнопок и выровнять их по правому краю?

ответ 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>
  

Также есть RadioButton.Элемент, который выполняет все это без необходимости написания шаблонного кода, подобного приведенному выше.

Пример из документов:

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

Сделайте это

    <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 обрабатывает все за вас.