Question

我正在尝试在FlatList中显示网络图像。我知道应该给网络图像指定宽度和高度

这是我的json

"templateview": [
            {
                "id": 4,
                "category_name": "Anniversary",
                "template_name": "http://zedexeposter.fbmlive.com/public/template_images/BYXdptf45tRoXQNv.png",
                "deleted": "0",
                "created_at": "2020-03-23 12:27:10",
                "updated_at": "2020-03-24 11:38:02"
            },
            {
                "id": 5,
                "category_name": "Birthday",
                "template_name": "http://zedexeposter.fbmlive.com/public/template_images/3Jkg5AAB2oR5VDz5.png",
                "deleted": "0",
                "created_at": "2020-03-23 12:48:29",
                "updated_at": "2020-03-24 11:38:20"
            }
        ]

这是我的代码

<FlatList
            horizontal
            showsHorizontalScrollIndicator={false}
            data={state.data.templateview}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item, index}) => {
              console.log(item.template_name);
              return (

                  <Image
                    source={{uri: item.template_name}}
                    style={StyleSheet.flatten([
                      styles.image,
                      {
                        borderColor: selectedImage === index ? '#000' : '#fff',
                      },
                    ])}
                  />

              );
            }}
          />

这是我的风格

image: {
    width: width / 1.2,
    height: height / 2,
    resizeMode: 'cover',
    borderWidth: 2,
  },

我也尝试过宽度和高度的硬编码，但是同样的问题

json中的第二张图像无法正确显示，而是显示黑色图像。当我仅使用Image组件并传递第二个图像uri时，它会正确显示，但是当我将其放入FlatList内时，第二个图像会变黑。仅在Android上会发生此问题。我在iOS模拟器上进行了测试，并且显示正确。我仅在Android Lollipop和Marshmallow上进行了测试，但我没有任何android设备，而android仿真器实际上冻结了我的笔记本电脑，因此未对此进行测试。我还在android:largeHeap="true"中将AndroidManifest添加到了应用程序标记。图片网址正确无误，我已经在各种浏览器中测试并打开了它，并且可以正常工作。

这仅发生在FlatList的水平滚动而不发生在垂直滚动。

网络图像未显示在FlatList中？

0 个答案: