reactjs - Touchable Highlight 取消配置 React Native 中的图像

Question

我在 React Native 中遇到了涉及可触摸高光和图像的问题。当我不使用 TH（可触摸高光）时，我的图像样式可以完美运行。1

但是当我在我的应用程序中添加一个 TH 来处理导航时，图像完全取消配置，我不知道为什么。它没有出现。2

这是我的代码。

<TouchableHighlight onPress={() => this.props.navigation.navigate("Catalog")}>
  <ImageBackground
    source={require("../assets/supermercados.png")}
    style={{ flex: 1, width: imageWidth, marginBottom: 10 }}
  >
    <View style={styles.view}>
      <Image
        source={require("../assets/iconSupermercados.png")}
        style={styles.icons}
      />
      <Text style={styles.text}>SUPERMERCADOS</Text>
    </View>
  </ImageBackground>
</TouchableHighlight>;

感谢你的帮助！

Answer 1

将样式添加到 TouchableHighlight 检查

<TouchableHighlight style={{flex: 1, width: imageWidth, marginBottom: 10}} onPress={() => this.props.navigation.navigate('Catalog')}>
     <ImageBackground source={require('../assets/supermercados.png')} style={{ flex:1 }}>
         <View style={styles.view}>
             <Image source={require('../assets/iconSupermercados.png')} style={styles.icons} />
                 <Text style={styles.text}>SUPERMERCADOS</Text>
         </View>
     </ImageBackground>
</TouchableHighlight>