Question

这是我的主要视图，并且在视图的第二个子视图中有“图像”。我遇到的问题是，我希望该View组件中的图像填充剩余的空间，但是没有运气。知道我该如何实现吗？我尝试在高度和宽度上都使用null，但它根本没有显示任何图像。 resizeMode =“ cover”也不起作用。 flex属性适用于其他视图，但不适用于图像，不知道为什么。

// Question.js

const Question = ({ type, ...props }) => {
  switch (type) {
    case RADIO_QUESTION_TYPE:
      return <RadioQuestion {...props} />;
    case TEXT_QUESTION_TYPE:
      return <TextQuestion {...props} />;
    case UPLOAD_QUESTION_TYPE:
      return <FileUpload {...props} />;
    default:
      return <h1>Unknown Question Format</h1>;
  }
};

export default Question;

Answer 1

使用undefined而不是null。它应该工作

<View style={{flex: 0.8, marginTop: 20}}>
      <Image style={{width: undefined, height: undefined, flex:1}} resizeMode="cover" source={{uri: item.item.posts[0].imageUrl}} />
    </View>

Answer 2

给定flex 1时，宽度为'100％'且高度为空，则图像将显示在其余空间上

您可以使用此代码

mask = df['Column 1'].ne(df['Column 1'].shift(-1))
df1 = pd.DataFrame('',index=mask.index[mask] + .5, columns=df.columns)

df = pd.concat([df, df1]).sort_index().reset_index(drop=True).iloc[:-1]
print (df)
  Column 1 Col2 Col3 Col4
0        A    s    b    d
1        A    s    j    k
2        A    b    d    q
3                        
4        B    b    a    d
5                        
6        C    l    k    p

用图像反应本机填充剩余空间

2 个答案: