时间戳

首页 > 解决方案 > 在 react-native-web 中禁用或更改 TextInput 的大小更改

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

问题描述

当我在 react-native-web 项目中选择 TextInput 时，我正在寻找禁用或更改自动缩放行为的方法。这不是我在 react-native 项目中遇到的问题，仅在使用 react-native-web 的项目中。它抛弃了我的布局，因为当我选择 TextInput 时它会放大，但从不缩小，即使我导航到同一项目中的另一个屏幕也是如此。我最终得到的屏幕比手机屏幕宽，底部有一个滚动条。

以下是我迄今为止尝试过但对我不起作用的解决方案：

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

  2. 在设置高度/宽度的视图中包含文本输入和/或在设置高度/宽度的视图中包含整个组件或屏幕。这不起作用，因为如果 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;">

任何建议表示赞赏。谢谢，

标签： resizezoomingdisablereact-native-webreact-native-textinput

解决方案

这个答案对我有用：

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
},

推荐阅读