在react-native-web中禁用或更改TextInput的大小更改

Question

我正在寻找禁用或更改在react-native-web项目中选择TextInput时获得的自动缩放行为的方法。这不是我在react-native项目中遇到的问题，仅在使用react-native-web的项目中。它之所以偏离我的布局，是因为当我选择TextInput时它会放大，但是即使我导航到同一项目中的另一个屏幕，也永远不会缩小。我最终得到的屏幕比电话屏幕宽，并且底部具有滚动条。

这里是我到目前为止尝试过的解决方案，但对我没有用：

1. 将TextInput的height和maxHeight设置为相同的值，并将TextInput的width和maxWidth设置为相同的值。这似乎被完全忽略，没有任何区别。

2. 将TextInputs包含在设置的高度/宽度的视图中和/或将整个组件或屏幕包含在设置的高度/宽度的视图中。这是行不通的，因为如果TextInputs展开，它将不会停留在View的边界内。

3. 在屏幕主视图周围放置边距和填充。这只会补偿行为，而不是停止行为。这还不够。

4. 我看过文档的长宽比，但我认为这不会有所帮助，因为据我所知，长宽比没有变化。

这是我遇到此问题的代码示例：

   <TextInput style={styles.inputsTwo}
       accessible={this.state.access}
       placeholder="Email"
       clearButtonMode="always"
       onChangeText={text => this.setState({email: text})}
       value={this.state.email}
    />

这是我的样式：

inputsTwo: {
    textDecorationLine: 'underline',
    marginBottom: 10,
    textAlign: 'left',
    marginLeft: 30,
    borderBottomColor: 'rgb(85, 99, 255)',
    borderBottomWidth: 2,
    fontFamily: 'HelveticaNeue',
    height: 48,
    maxHeight: 48,
    width: 300,
    maxWidth: 300
},

当我在浏览器中打开开发人员工具时，我看到这是react-native-web将其翻译为：

 <div dir="auto" data-focusable="true" tabindex="0" class="rn-borderTopWidth-13yce4e rn- 
borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing- 
deolkf rn-display-1471scf rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 
rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn- 
marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn- 
paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0" 
style="align-items: center; color: rgb(255, 0, 0); font-family: Helvetica-Bold; font-size: 
15px; justify-content: center; text-align: center; -webkit-box-align: center; -webkit-box- 
pack: center;"></div>

<input placeholder="Email" autocapitalize="sentences" autocomplete="on" autocorrect="on" 
dir="auto" spellcheck="true" type="text" data-focusable="true" class="rn-MozAppearance- 
97bpaa rn-WebkitAppearance-n1uzsy rn-backgroundColor-1niwhzg rn-borderTopColor-nqhrom rn- 
borderRightColor-1878er4 rn-borderLeftColor-fpul1g rn-borderTopLeftRadius-ou6ah9 rn- 
borderTopRightRadius-t12b5v rn-borderBottomRightRadius-zmljjp rn-borderBottomLeftRadius- 
pm2fo rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn- 
borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn- 
borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-fontSize-1b43r93 rn-paddingTop-wk8lta rn- 
paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-resize-1dz5y72" 
value="" style="border-bottom-color: rgb(85, 99, 255); border-bottom-width: 2px; font- 
family: HelveticaNeue; height: 48px; margin-bottom: 10px; margin-left: 30px; max-height: 
48px; max-width: 300px; text-align: left; text-decoration: underline; width: 300px;">

任何建议都值得赞赏。谢谢，

Answer 1

此答案对我有用：

https://stackoverflow.com/a/16255670/9147743

我已针对我的情况进行了修改，如下所示：

inputsTwo: {
    textDecorationLine: 'underline',
    marginBottom: 10,
    textAlign: 'left',
    marginLeft: 30,
    marginRight: 30,
    borderBottomColor: 'rgb(85, 99, 255)', 
    borderBottomWidth: 2,
    fontFamily: 'HelveticaNeue',
    height: 48,
    fontSize: 16
},