当我在 react-native-web 项目中选择 TextInput 时,我正在寻找禁用或更改自动缩放行为的方法。这不是我在 react-native 项目中遇到的问题,仅在使用 react-native-web 的项目中。它抛弃了我的布局,因为当我选择 TextInput 时它会放大,但从不缩小,即使我导航到同一项目中的另一个屏幕也是如此。我最终得到的屏幕比手机屏幕宽,底部有一个滚动条。
以下是我迄今为止尝试过但对我不起作用的解决方案:
将 TextInput 的 height 和 maxHeight 设置为相同的值,并将 TextInput 的 width 和 maxWidth 设置为相同的值。这似乎被完全忽略了,没有任何区别。
在设置高度/宽度的视图中包含文本输入和/或在设置高度/宽度的视图中包含整个组件或屏幕。这不起作用,因为如果 TextInputs 展开,它将不会停留在 View 的边界内。
在屏幕的主视图周围放置边距和填充。这只会补偿行为而不是停止它。这还不够。
我查看了纵横比的文档,但我认为这不会有帮助,因为据我所知纵横比没有改变。
这是我遇到此问题的代码示例:
<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;">
任何建议表示赞赏。谢谢,