Question

我正在尝试使用justifyContent: 'flex-start'将缩略图与topLeft对齐。但它不起作用。以下是我的代码。

<Content>
 <View  key = {index} style={styles.commentBody}>
  <List>
    <ListItem avatar>
      <View style={{ justifyContent: 'flex-start'}}>
        <Left>
          <Thumbnail 
            source={post.Thumbnail} 
          />
        </Left>
     </View>

    <Body>
      <Text>{post.body}</Text>
    </Body>

    <Right>
      <Text note>3:43 pm</Text>
    </Right>

  </ListItem>

</List>
</View>

我尝试将justifyContent: 'flex-start'添加到缩略图style，但没有运气。

如何使缩略图显示在左上方而不是中心？

感谢。

Answer 1

通常默认情况下，所有组件都以flexDirection: row，justifyContent: flex-start和alignItems: flex-start开头。如果您尝试将其设置为flex-start，可能是您的结构出现了问题。

尝试向组件添加一些不同颜色的边框，以了解它们在屏幕中的区域（宽度，填充，边距等）。确定要对齐的组件是否需要对齐区域。检查父项是否包含任何阻止您对齐组件的样式。请记住将flex: 1添加到要对齐的组件中。另请查看如何使用alignItems和justifyContents https://facebook.github.io/react-native/docs/flexbox.html

的文档

希望它有所帮助。

JustifyContent在NativeBase中的List中不起作用

1 个答案: