如何在flatlist react native中水平显示图像？

3b6akqbq 于 2023-02-24 发布在 React

关注(0)|答案(2)|浏览(157)

我尝试在使用FlatList时水平而不是垂直显示feed图像我该怎么做？我尝试将feed图像 Package 到视图中，然后给它一个flex-direction行我还尝试给我的FlatList给予horizontal={true}，但所有这些方法都不起作用有人能帮忙吗？
我用我的代码创建了一个小应用程序，您可以从这里访问代码https://codesandbox.io/s/runtime-leaf-jywqqr?file=/src/App.js

react-native

来源：https://stackoverflow.com/questions/75547320/how-to-display-images-horizontally-in-flatlist-react-native

2条答案

按热度按时间

ftf50wuq1#

horizontal运行良好，下面是一个简单的示例：

const Photo = ({download_url}) => (
  <Image style={{width: 320, height: 180}} source={{uri: download_url}} />
);

const App = () => {
  const [photos, setPhotos] = useState([])
  useEffect(() => {
    const getPhotos = async () => {
        const response = await fetch("https://picsum.photos/v2/list")
        if (response.ok) {
          setPhotos(await response.json())
        }
    }
    getPhotos()
  }, [])
  return (
    <FlatList
      data={photos}
      horizontal
      renderItem={({item}) => <Photo download_url={item.download_url} />}
      keyExtractor={item => item.id}
    />
  );
};

赞(0）回复(0）举报 2023-02-24

gr8qqesn2#

我认为你需要设置宽度，高度的项目

赞(0）回复(0）举报 2023-02-24