用 alignItems 反应原生 flexwrap：中心不工作答案

【问题标题】：react native flexwrap with alignItems: center is not working用 alignItems 反应原生 flexwrap：中心不工作
【发布时间】：2021-09-06 20:38:14
【问题描述】：

我正在使用 flex 在 react-native 上进行响应式设计

<View
    style={{
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        paddingHorizontal: 10 
    }}>
    <View style={{ flex: 0, backgroundColor: 'red'}}>
        <Text style={{ fontSize: 22 }}>
            { moment().format('LL') }                               
        </Text>
    </View>
    
    <View style={{flex: 0, backgroundColor: 'blue'}}>
        <Text style={{ fontSize: 22,flex: 1, alignSelf: 'flex-end'}}>
            # 123123123123123
        </Text>
    </View>
</View>

这在正常比例字体上正常工作。输出是这样的

然后，当设备使用更大比例的字体时。输出是这样的

蓝色组件溢出容器。

但是，当我从样式中删除 alignItems: center 时。它工作正常。

还有其他解决方案或解决方法吗？谢谢！

【问题讨论】：

标签： react-native flexbox stylesheet

【解决方案1】：

我觉得你应该这样设计

Working Example Here

<View style={{ width: '100%', flexDirection: 'row' }}>
  <View style={{ flex: 1 }}>
    <Text
      style={{ fontSize: 22 }}
      adjustsFontSizeToFit={true}
      numberOfLines={1}>
      June 23, 2021
    </Text>
  </View>

  <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
    <Text
      style={{ fontSize: 22 }}
      adjustsFontSizeToFit={true}
      numberOfLines={1}>
      # 123123123123123
    </Text>
  </View>
</View>

【讨论】：

谢谢！我刚刚编辑了不应该被截断的文本。