我有一個React Native視圖，我希望它能夠擴(kuò)展到給定的寬度，但不能超過給定的寬度。在這個視圖中，我有一個文本元素，我想填充它的父元素的整個寬度。看起來是這樣的:

但是，如果我將父視圖設(shè)置為居中對齊自對齊:“居中”，視圖將收縮以適應(yīng)文本視圖中的文本，如下所示:

為什么更改視圖的對齊方式會導(dǎo)致其大小發(fā)生變化，如何防止這種情況發(fā)生？

預(yù)期產(chǎn)出:

復(fù)制此場景的完整代碼:

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',
  },
});

為什么增加寬度不起作用

雖然設(shè)置固定的寬度值會強(qiáng)制最大大小，但它會防止此元素縮小到該值以下。因此，指定寬度不是一個解決方案。這是一個視圖尺寸超出顯示器的例子。

寬度:

預(yù)期:

訣竅是將maxWidth: 200和width:& quot；100% & quot；。然后，寬度將盡可能擴(kuò)大，但仍限制在最大值200。

box: {
    backgroundColor: 'red',
    height: 50,
    maxWidth:200,
    width: '100%',
    alignSelf: 'center'  // <---REMOVE THIS LINE TO FILL VIEW
  },

博覽會