时间戳

首页 > 解决方案 > 在水平平面列表旁边添加图像

reactjs - 在水平平面列表旁边添加图像

问题描述

我对 React Native 很陌生，正在尝试创建一个屏幕，其中有 2x 行图像水平滚动（我已经用 FlatList 完成了，如屏幕截图所示），但我希望在这些图像的左侧有一个更大的图像图片。但是，每当我将图像添加到代码中时，它都会显示在上方，而不是旁边。这是我到目前为止的代码尝试和屏幕截图：


const styles = StyleSheet.create({
  container: {
    height: '100%',
    marginHorizontal: 16 * v,
    marginVertical: 16 * v,
    justifyContent: 'center',
    flexDirection: 'row',
  },
  smileImage: {
    width: 240 * v,
    height: 240 * v,
  },
})

const HomeView = () => {
  return (
    <>
      <SafeAreaView style={styles.container}>
        <ScrollView horizontal>
          <Image source={Images.smile} style={styles.smileImage} />
          <FlatList
            data={[
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
            ]}
            numColumns={2}
            renderItem={() => (
              <View
                style={{
                  flex: 1,
                  height: 150,
                  width: 150,
                  borderWidth: 1,
                  borderColor: 'black',
                  margin: 20,
                }}
              />
            )}
          />
        </ScrollView>
      </SafeAreaView>
    </>
  )
}

有人可以帮我在左侧的 FlatList 旁边获得更大的图像吗？ 在此处输入图像描述

标签： reactjsreact-native

解决方案

您可以使用名为FlatlistlistHeaderComponent的道具，并且可以在其中添加图像

<Flatlist listHeaderComponent={<Image source={{uri:link of image}}/>}/>

推荐阅读