我有一个React Native View，我想扩展到但不超过给定的宽度。在这个View中，我有一个Text元素，我想填充其父元素的完整宽度。它看起来像这样：

但是，如果我将父View设置为与alignSelf: 'center'居中对齐，则视图将缩小以适应Text视图中的文本，如下所示：

为什么改变View的对齐方式会导致它改变大小，如何防止这种情况？

预期输出：

复制此场景的完整代码：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.paragraph}>Text</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  box: {
    backgroundColor: 'red',
    height: 50,
    maxWidth:200,
    alignSelf: 'center'  // <---REMOVE THIS LINE TO FILL VIEW
  },
  paragraph: {
    textAlign: 'left',
    backgroundColor: 'green',
  },
});

为什么增加宽度不行

虽然设置一个固定的width值将强制执行最大大小，但它将防止此元素缩小到该值以下。因此，指定width不是一个解决方案。下面是一个示例情况，其中视图的大小将超出显示范围。
宽度：

预期：