react-native - 用 alignItems 反应原生 flexwrap：中心不工作

Question

我正在使用 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-nativeflexboxstylesheet

Answer 1

我认为你应该这样设计

这里的工作示例

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