JustifyContent 在 NativeBase 的列表中不起作用

Question

我正在尝试使用 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，但没有成功。

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

谢谢。

Answer 1

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

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

的文档

希望对您有所帮助。

JustifyContent 在 NativeBase 的列表中不起作用

JustifyContent not working in List in NativeBase

reactjs

react-native

native-base

react-native-image