React native-如何动态设置容器或文本输入，对所有设备都响应

Question

我正在使用本机反应。我需要设置需要对所有设备响应的输入容器或文本输入框。如何编写css样式以动态计算宽度和高度。

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

Answer 1

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

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

...或使用flexbox。有关此内容的更多信息。

https://facebook.github.io/react-native/docs/height-and-width

Answer 2

有很多技巧可以做到这一点：

1-使用百分比：

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

这里的想法是将TextInput（宽度为100％，高度固定为27）放在View（容器）中，然后为文本输入指定宽度容器使用百分比（例如90％或80％...）

对于最佳做法，在TextInput的情况下，请始终对百分比 width 使用百分比，对 height 使用固定值

2-使用尺寸

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

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