Reactjs React native—如何动态设置容器或文本输入，这对所有设备都是响应的

我用的是react native。我需要设置输入容器或文本输入框，它需要对所有设备做出响应。如何编写css样式来动态计算宽度和高度

请参阅iPhone 7 plus中开发的宽度为375、高度为27的输入框的屏幕截图

---

React Native采用一种样式道具，可以包含许多非常类似CSS的属性。例如，宽度与您在MDN docs for CSS Width属性中找到的宽度非常相似。您可以使用基于百分比的宽度实现响应：

style={{{width:'100%}}

…或使用flexbox。更多信息请参见下文

---

要做到这一点，有很多技巧：

1-使用百分比：

<View
  style={{
    width: '80%',
    justifyContent: 'center',
    alignItems: 'center', 
  }}
>
  <TextInput
    style={{
      width: '100%',
      height: 27,
    }}
  />
</View>

<View
  style={{
    width: Dimensions.get('window').width,
    justifyContent: 'center',
    alignItems: 'center', 
  }}
>
  <TextInput
    style={{
      width: '100%',
      height: 27,
    }}
  />
</View>

这里我们计算了屏幕的宽度，并将其设置为文本输入容器的宽度

当然，您必须从react native导入维度

import { Dimensions } from 'react-native'

但对我来说，我更喜欢使用第一种解决方案