时间戳

首页 > 解决方案 > 如何处理 React-native 中的溢出元素？

reactjs - 如何处理 React-native 中的溢出元素？

问题描述

<View></View>当它们的长度大于容器的长度时，如何在 react-native 中使用 flex 使内部的任何元素自行排列？

下面是我的代码：

const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row', }}>
   {artists.map(artist => (
     <Image
       key={cast.name}
       source={{ uri: artist.img }}
       style={{ width: 80, height: 100 }}
    />
   ))}

</View>
);

这就是我要的。我想让第 5 和其他人在达到屏幕宽度限制后自动低于第一行，就像 HTML 通常做的那样

这就是我要的

但是相反，这就是我在 React Native 中得到的结果，<Image>元素继续呈现在其父级宽度之外

这就是我得到的

标签： reactjsreact-native

解决方案

您可以使用道具flexWrap:'wrap'来包装元素。flexWrap 控制子元素在到达 flex 容器的末端后是否可以环绕。更多在这里

const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row',flexWrap:'wrap' }}>
   {artists.map(artist => (
     <Image
       key={cast.name}
       source={{ uri: artist.img }}
       style={{ width: 80, height: 100 }}
    />
   ))}

</View>
);

推荐阅读