英文:
How to display images horizontally in flatlist react native?
问题
我正在尝试在使用FlatList时水平显示动态图片，而不是垂直显示。我该如何做呢？我尝试将动态图片包装到一个视图中，然后为其设置flex-direction: row，还尝试给我的FlatList添加horizontal={true}，但所有这些方法都不起作用。有人可以帮忙吗？
我使用我的代码创建了一个小应用，你可以从这里访问代码：https://codesandbox.io/s/runtime-leaf-jywqqr?file=/src/App.js
英文:
I am trying to display feed images horizontally instead of vertically in using FlatList How can I do that? I tried wrapping feed images into a view and then giving it a flex-direction row I also tried to give horizontal={true} to my FlatList but all these methods are not working Can anyone help please to do that?
I created a small app using my code you can access the code from here https://codesandbox.io/s/runtime-leaf-jywqqr?file=/src/App.js
答案1
得分: 1
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}
/>
);
};
英文:
horizontal works just fine, here is the simple example:
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}
/>
);
};
答案2
得分: 0
你需要为项目设置宽度和高度。
英文:
I think you need set width, height for item
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论