Question

我正在使用React本机组件FlatList，实际上有两个FlatList用于Image的动态内容，另一个用于静态数据。问题是当我加载屏幕时静态数据最初是负载并且在动态内容加载之后但是当静态数据加载时它占据动态内容区域，当动态图像加载时它们占据位置并且静态数据延伸到底部我想要为动态数据设置一个位置，直到它加载它将显示的区域，它应该是阴影类型或加载骨架的东西我不希望当图像处于加载状态时，另一个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

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

图像阴影加载React Native

1 个答案: