首页 文章

加载React Native时的图像阴影

提问于
浏览
0

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

1 回答

  • 0

    我找到了一个解决方案,在我的第一个FlatList周围定义了View并将其精确地分配给我的图像,所以现在另一个FlatList在加载时不与它重叠 .

相关问题