使用 Flex 时图像消失答案

【问题标题】：Images disappearing when using Flex使用 Flex 时图像消失
【发布时间】：2020-08-01 03:29:21
【问题描述】：

简单的问题：每当我在图像上使用 flex 时，当我在 expo 上预览我的应用时，它根本不会显示。

这就是我的做法：

            <Image 
                style = {{flex: 1, height: undefined, width: undefined}}
                source = {require('./img/anyImage.png')}
            />

如果我只定义高度和宽度，没有弹性，它们就会出现。我的图片没有显示有什么特别的原因吗？

注意：我已经尝试为高度和宽度设置值。

非常感谢！

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

传递 null 而不是 undefined 应该可以解决问题。

 <Image 
                    style = {{flex: 1, height: null, width: null}}
                    source = {require('./img/anyImage.png')}
                />

根据您的代码，如果您想使用 flex，可以使用这两个选项之一。

1.将flex:1 分配给具有空宽度的图像以获取整个视图

2.将 flex 与 resizeMode 一起使用以获取整个视图

{/* THIS IS THE FIRST OPTION YOU CAN USE  */}
        <View>
          <View style={{ width: 100, height: 100 }}>
            <Image
              style={{ flex: 1, width: null }}
              source={require("./img/cervecerias.png")}
            />
          </View>
        </View>



    {/* THIS IS THE SECOND OPTION YOU CAN USE  */}
    <View style={{ width: 200, height: 100 }}>
      <Image
        style={{ flex: 1 }}
        source={require("./img/Cocktails.png")}
        resizeMode="contain"
      />
      <Text style={styles.categoriesText}> Cocktails</Text>
    </View>

【讨论】：

嘿，尝试使用 null 仍然无法正常工作。我刚刚注意到，如果我尝试将 flex 添加到 Text 组件，那也不起作用。我是否需要导入一些东西，或者这只是一个奇怪的问题？
如果您将代码推送到 github 并在此处留下链接，那就太好了
github.com/larguelles/imagesdisappearing 这是回购的链接。非常感谢！
注意：我上传的代码目前没有使用 flex。我把它改成了固定的宽度和高度，这样我就可以继续工作了。弹出的另一个问题是，当我将图像包装在 TouchableOpacity 组件中时，它们也会消失。
我正在根据您发送的代码编辑我的答案