React Native Align Self Flex End 未按预期工作

Question

非常简单，就是将一些文本放在左边，一些放在右边。为此，我想我应该使用 flexbox 和以下代码：

return (
<TouchableOpacity disabled={isLoading}>
  <View style={styles.container}>
    <View style={styles.venueImageContainer}>
      {isLoading ? (
        <Loader />
      ) : (
        <Image style={styles.venueImage} source={ { uri: getImage()} } />
      )}
    </View>
    <View style={{flexDirection: 'row', backgroundColor: 'red'}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue'}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{alignSelf: 'flex-end', backgroundColor: 'green'}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

唯一通过“样式”引用的样式。用于文本颜色和大小。所以没有什么可以干扰弹性布局。

所以理想情况下，我希望“Text1”在最左边，然后“Text2”在最右边，但我得到的是：

因此父容器获得全宽，但子容器没有通过 flex-start 或 flex-end 自行对齐。

我是 React / React Native 的新手，所以请对我放轻松......

干杯，伙计们:)

Answer 1

你有没有尝试过space-between？

<View style={{flexDirection:'row', justifyContent:'space-between', backgroundColor:'red'}}>