图像在加载 React Native 时出现阴影

Question

我正在使用React本机组件FlatList，实际上有两个FlatList，一个用于图像的动态内容，另一个使用静态数据。问题是当我加载屏幕静态数据时，最初加载，然后加载动态内容，但是当静态数据加载时，它占据了动态内容的区域，当加载动态图像时，它们占据了那里的位置，静态数据延伸到底部，我想为动态数据设置一个位置，直到它加载将显示它应该是阴影类型或加载骨架的区域我不希望另一个平面列表在图像处于加载状态时占用图像的空间。

<FlatList
        data={newMovies}
        renderItem={({ item, index }) => {
            if (index >= 10) {
                return null;
            }
                return (
                  <View
                  ><Image
                      resizeMode="cover"
                    style={{
                            height: Sizes.DEVICE_HEIGHT * 0.32,
                            width: Sizes.DEVICE_WIDTH * 0.8875,
                            zIndex: -100,
                            marginLeft: 9,
                        }}
                    source={{ uri: IMAGE_URL_PREFIX + item.backdrop || 
                    item.poster }}
                  />
                    <LinearGradient
                      start={{ x: 0.0, y: 0.0 }}
                      end={{ x: 0.0, y: 1.2 }}
                      locations={[0, 0.4, 0.85]}
                      colors={[Colors.transparent, Colors.transparent, 
                      Colors.black]}
                      style={{
                                height: Sizes.DEVICE_HEIGHT * 0.32,
                                width: Sizes.DEVICE_WIDTH * 0.8875,
                                marginLeft: 10,
                                position: 'absolute',
                                zIndex: 10,
                            }}
                    >
                      <View style={Styles.horizontalImage}>
                        <Text style={Styles.posterName} numOfLines={1}>
                        {item.name}</Text>
                        <Text style={Styles.posterDesc}>
                        {item.stringAttributes}
                        </Text>
                      </View>
                    </LinearGradient>
                  </View>
                );
        }
        }
        horizontal
        onEndReached={() => this.onListEndReached(this.props)}
      />
    </View>
    <ScrollView style={Styles.innerContainer}>
      <FlatList
        removeClippedSubviews={false}
        data={[{ key: 'New On Netflix', id: 0 },
                    { key: 'Watch With Friends', id: 1 },
                    { key: 'Watch By Yourself', id: 2 },
                    { key: 'Newset Movies', id: 3 },
                    { key: 'Best of All Time', id: 4 },
                    { key: 'Best On Netflix', id: 5 },
                    { key: 'Most Conversational', id: 6 },
                    { key: 'Most Rewatchable', id: 7 }]}
        renderItem={({ item }) => (<List>
          <ListItem style={{ marginLeft: 0 }} onPress={() => this.selection(item.key, item.id)}>
            <Text style={Styles.innerheader}>{item.key}</Text>
          </ListItem>
        </List>)}
        keyExtractor={item => item.id}
      />

Answer 1

我找到了一个解决方案，即在我的第一个平面列表周围定义视图，并将 with 完全分配给我的图像，所以现在另一个平面列表在加载时不会与它重叠。