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

Question

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

下面是我的代码：

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>元素继续呈现在其父级宽度之外

Answer 1

您可以使用react native的Dimension属性来简单地动态定义图像。

就像在使用

<Image
   resizeMode="cover" or try "contain"
   key={cast.name}
   source={{ uri: artist.img }}
   style={{ width: width * 0.5 , height: 100 }} // this will be done currently defining the values . 
/>

这里是一个有关在本机Click to see the blog中进行图像处理的博客

希望我的回答会给您一个解决您问题的想法

Answer 2

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

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>
);