Touchable не работает с позицией: абсолют

1

Я не могу понять, как сделать мой компонент осязаемым. У меня есть одна обертка, которая имеет положение: относительный и два элемента с положением: абсолютный. Я хотел бы сделать эту обертку сенсорной, но она не работает ни с одним из компонентов Touchable от реактивного.

Этот backgroundColor только для тестирования.

<View style={styles.container}>
    <TouchableHighlight onPress={() => { console.log('touched') }}>
      <View style={styles.wrapper}>
        <View style={styles.wrapperForImage} />
        <Text style={styles.text} >{text.toUpperCase()}</Text>
      </View>
    </TouchableHighlight>
  </View>

const styles = StyleSheet.create({
   container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
 },
 wrapper: {
   position: 'relative',
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
 },
 wrapperForImage: {
   position: 'absolute',
   width: 200,
   height: 200,
   backgroundColor: 'red'
 },
 text: {
   position: 'absolute',
   width: 100,
   height: 100,
   zIndex: 10,
   textAlign: 'center',
   color: '#000',
   fontSize: 14,
   lineHeight: 23
 }

});

зависимости:

"dependencies": {
    "expo": "^31.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-extended-stylesheet": "^0.10.0",
    "tslib": "^1.9.3"
 }
Теги:
react-native

1 ответ

0
Лучший ответ

Вам нужно указать высоту и ширину для TouchableHighlight:

<View style={styles.container}>
               <TouchableHighlight style={{
                   backgroundColor: 'green',
                   height: '100%',
                   width: '100%',

               }}
                   onPress={() => { alert('touched') }}>
                   <View style={styles.wrapper}>
                       <View style={styles.wrapperForImage} />
                       <Text style={styles.text} >TEXT</Text>
                   </View>
               </TouchableHighlight>
           </View>
  • 0
    Спасибо, теперь работает нормально :)
  • 0
    Вы можете проголосовать выше. Так что это поможет и другим людям.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню