0

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

<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但没有运气。

如何使缩略图出现在左上角而不是中心？

谢谢。

4

1 回答 1

2

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

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

希望能帮助到你。

于 2017-09-09T16:30:33.547 回答