使用 alignItems 反应本机 flexwrap：中心不起作用

Question

我正在使用 flex on 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 时。它工作正常。

任何其他解决方案或变通办法？谢谢！

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

使用 alignItems 反应本机 flexwrap：中心不起作用

react native flexwrap with alignItems: center is not working

stylesheet

flexbox

react-native