React Native Align自伸缩端未按预期工作

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>)

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

因此，父容器获得全宽度，但子容器不会通过flex-start或flex-end对齐。

我是新手，所以请对我宽容一些。。。

干杯，伙计们：）

Answer 1

您的解决方案不起作用，因为CSS属性align self用于横轴，而alignSelf的工作方式相同，因此它不能用于水平对齐（此处为主轴）。

1. 第一个解决方案：使用理由内容：空格之间它非常适合您的情况：

<View style={{ flexDirection: 'row', backgroundColor: 'red', justifyContent: 'space-between' }}>
                    <View style={{backgroundColor: 'blue' }}>
                        <Text>Left</Text>
                    </View>
                    <View style={{backgroundColor: 'green' }}>
                        <Text>Right</Text>
                    </View>
</View>

<View style={{ flexDirection: 'row', backgroundColor: 'red' }}>
                    <View style={{ backgroundColor: 'blue' }}>
                        <Text>Left</Text>
                    </View>
                    <View style={{flex: 1}}></View>
                    <View style={{ backgroundColor: 'green' }}>
                        <Text>Right</Text>
                    </View>
 </View>

Answer 2

也许它意味着red视图的末尾，它位于green视图本身的末尾。在红色的视图上放一个，如下所示：

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', alignSelf: 'stretch'}}>
      <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>)

或者，您可以在绿色视图中使用位置：'绝对值来使用一些固定值来更改它的位置，如下所示：

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={{backgroundColor: 'green', position: 'absolute', right: 10}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

更改right： 10值以匹配您的需求。

或者在红色视图上放置一个理由Content：'space-中间'，如下所示：

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', justifyContent: 'space-between'}}>
      <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>)

但是如果你想在红色视图中有两个以上的视图，其中一个会在中间，所以我不认为你会想要那个。

（我不知道为什么你的红色视野一直延伸到视野的尽头，但我认为不应该，我可能错了）

Answer 3

您是否尝试过在之间使用空格？

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