TouchableHighlight и TouchableOpacity влияют на макет на Android

Question

TouchableHighlight и TouchableOpacity влияют на макет на Android

Я заметил, что замена TouchableWithoutFeedback на TouchableHighlight или TouchableOpacity может вызвать различия в компоновке. Это ожидаемо?

Пример:

<TouchableWithoutFeedback onPress={this.onClick}>

  <View style={styles.row_container}>

    <Text style={styles.row_text}>

      {'I count the number of taps: ' + this.state.clicks}

    </Text>

  </View>

</TouchableWithoutFeedback>

С TouchableWithoutFeedback:

Заменив его на TouchableOpacity:

Стили:

row_container: {

  backgroundColor: 'rgba(0, 0, 0, 0.1)',

  flex: 1,

  height: 100,

  borderColor: '#333333',

  borderWidth: 1,

  borderRadius: 5,

  padding: 5,

},

row_text: {

  flex: 1,

  fontSize: 18,

  alignSelf: 'center',

},

705 4

react-native

4 ответов:

Comments

Ничего не найдено.

Martin Konicek · Accepted Answer · 2015-10-02 20:22:42

Решение состоит не в том, чтобы ввести представление оболочки. Просто установите стиль непосредственно на TouchableHighlight или TouchableOpacity:
<TouchableOpacity onPress={this.onClick} style={styles.row_container}>
  <Text style={styles.row_text}>
    {'I count the number of taps: ' + this.state.clicks}
  </Text>
</TouchableOpacity>

MacKenzie Clark · Accepted Answer · 2018-09-25 20:45:17

Чтобы ответить на вопрос "ожидается ли это", согласно документам, да.

Https://facebook.github.io/react-native/docs/touchableopacity

"непрозрачность контролируется путем обертывания детей в анимированную картинку.Представление, которое добавляется в иерархию представлений. Имейте в виду, что это может повлиять на макет."

Nguyễn Phúc · Accepted Answer · 2018-03-08 04:30:01

Стиль на TouchableOpacsity вместо View

0

2018-03-08 04:30:01

Nguyễn Phúc · Accepted Answer · 2018-03-09 04:28:36

<TouchableOpacity style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'black',margin:2}}> <Image style={{width:30,height:30,marginBottom:3}} source={require('../images/movies_white.png')} /> <Text style={{color:'#fff'}}>Lịch Sử</Text> </TouchableOpacity>

Вместо

<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'black',margin:2}}> <Image style={{width:30,height:30,marginBottom:3}} source={require('../images/movies_white.png')} /> <Text style={{color:'#fff'}}>Lịch Sử</Text> </View>