Как заставить TouchableOpacity переносить свое содержимое при вложении в родительский элемент с flex = 1

#react-native #touchableopacity

Вопрос:

Я знаю, что по умолчанию TouchableOpacity всегда имеет ширину как перенос содержимого. Но я помещаю его в представление с flex: 1. Ширина TouchableOpacity становится родительской / занимает всю ширину экрана.

 <View style={ {flex:1} }>
   <TouchableOpacity>
      <Text>I'm button</Text>
   </TouchableOpacity>
</View>

Вопрос в том, как я мог бы заставить TouchableOpacity переносить содержимое, будучи вложенным в такое представление.

Спасибо

Ответ №1:

Вам нужно будет использовать стиль position: «absolute» для TouchableOpacity

 <View style={{flex:1}}>
   <TouchableOpacity style={{position: "absolute" }}>
      <Text>I'm button</Text>
   </TouchableOpacity>
</View>

Вы также можете использовать
alignSelf: ‘flex-start’ также может использовать center или flex-end.

1. Я попробовал вашу рекомендацию, TouchableOpacity работает должным образом, но position: «absolute» заставляет TouchableOpacity перемещаться в верхний левый угол экрана? Но спасибо (y)

2. Да, я пропустил этот момент, вы можете использовать alignSelf: ‘flex-start’ также может использовать center или flex-end.

Ответ №2:

вы можете TouchableOpacity создать такой стиль, чтобы TouchableOpacity у него был свой собственный стиль

                <View style={ {flex:1} }>
                  <TouchableOpacity style={{width:'80%',height:'20%'}}>
                      <Text>I'm button</Text>
                  </TouchableOpacity>
                </View>