React Native Align自弯曲端未按预期工作

gzszwxb4 于 2022-11-25 发布在 React

关注(0)|答案(5)|浏览(150)

非常简单的一个例子，希望将一些文本在左边对齐，一些在右边对齐。为此，我想我应该使用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>)

通过“Styles.”引用的唯一样式是文本颜色和大小。因此没有任何内容会干扰Flex布局。
理想情况下，我希望“Text 1”在最左边，“Text 2”在最右边，但实际上得到的是：

因此，父容器获得全宽，但子容器不会通过flex-start或flex-end自行对齐。
我是React / React Native的新手，所以请对我宽容一点...
干杯伙计们：）

react-native

来源：https://stackoverflow.com/questions/61600137/react-native-align-self-flex-end-not-working-as-expected

5条答案

按热度按时间

lskq00tm1#

你试过space-between吗？

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

赞(0）回复(0）举报 2022-11-25

j0pj023g2#

在red视图上添加一个alignSelf: 'stretch'，如下所示：

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

或者，您可以在绿色视图上使用position: 'absolute，使用一些固定值更改其位置，如下所示：

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值。
或者在red视图上放置一个justifyContent: 'space-between'，如下所示：

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

但如果你想有两个以上的意见内的红色意见，其中一个将在中间，所以我不认为你会想要的。
（我不知道为什么你的红色视图一直延伸到视图的尽头，但我认为它不应该（我可能是错的））

赞(0）回复(0）举报 2022-11-25

iszxjhcz3#

我在最后对齐项目时遇到了一些困难，但是

justifyContent: 'flex-end'

终于起作用了

赞(0）回复(0）举报 2022-11-25

omhiaaxx4#

因此，与其像大家建议的那样使用“间隔"（这只是一个变通办法......），不如使用以下解决方案：您必须在指定弯曲起点和弯曲终点的样式中添加“flex：1”。

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', flex:1}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue', flex:1}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{alignSelf: 'flex-end', backgroundColor: 'green', flex:1}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

赞(0）回复(0）举报 2022-11-25

tp5buhyn5#

您的解决方案不起作用，因为CSS属性align-self用于横轴，而alignSelf的工作方式相同，因此它不能用于水平对齐，这里是主轴。
1.第一种解决方案：使用justifyContent: space-between，它非常适合您情况：

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

1.第二种解决方案：使用View和flex: 1来"填充"中间空间：

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

赞(0）回复(0）举报 2022-11-25

我来回答

React Native Align自弯曲端未按预期工作

5条答案

相关问题

热门标签

最新问答