反应原生 textInput scrollView android

Posted 2023-04-18

【中文标题】反应原生 textInput scrollView android

【英文标题】：React native textInput scrollView android

【发布时间】：2017-02-06 15:35:34

【问题描述】：

我正在尝试编写一个非常简单的应用程序来测试本机反应。

我在一个大的 ScrollView 中有一些 TextInput 组件，作为注册公式。

一切正常，但是当我滚动单击 TextInput 时，它不会滚动。

当我点击空白处时，我只能滚动页面。知道怎么做吗？

谢谢。

<ScrollView>
  <TextInput onChangeText=email => this.setState(email) label= I18n.t("contactEmail") />
  <TextInput onChangeText=email => this.setState(email) label= I18n.t("contactEmail") />
  <TextInput onChangeText=email => this.setState(email) label= I18n.t("contactEmail") />
  <TextInput onChangeText=email => this.setState(email) label= I18n.t("contactEmail") />
</ScrollView>

【问题讨论】：

***.com/questions/39745442/…的可能重复

这个问题你解决了吗？

我遇到了这个问题，原来是因为我在TextInput的样式中指定了height，但是TextInput的内容超过了那个高度在 android 而不是 ios 中（因为系统字体覆盖了我的字体样式）。万一其他人遇到这个问题，可以通过删除硬编码的高度或增加它来修复它，以确保它可以包含内容而不会溢出。

【参考方案1】：

我遇到了同样的问题，搜索了一段时间后没有答案帮助我；所以我自己解决了这个问题，在每个<TextInput> 上加上一个<TouchableWithoutFeedback /> 并将触摸事件发送回<TextInput />：

<View>
    <TextInput ref =(ref)=>this.textInput = ref>
    <TouchableWithoutFeedback style=position: 'absolute', top:0, bottom:0, left:0, right:0
    onPress=()=>this.textInput.focus()/>
</View>

您可以创建一个自定义组件，像这样包装 TextInput 并在您的 ScrollViews 中使用它们。

【参考方案2】：

我已经解决了这样的问题：

  <TouchableOpacity
                    activeOpacity=1
                    style= flex: 1 
                    onPress=() => this.textInput.focus() >
                    <View
                        style= flex: 1 
                        pointerEvents="none" >
                        <TextInput
                            ref=(ref) => this.textInput = ref
                            style= fontSize: 14, color: '#666666', textAlign: 'right', flex: 1 
                            placeholder=this.props.placeHolder
                            defaultValue=this.props.defaultValue ? this.props.defaultValue + '' : ''
                            placeholderTextColor='#aaaaaa'
                            keyboardType=this.props.keyboardType ? this.props.keyboardType : 'default'
                            secureTextEntry=this.props.isSecret
                            onChangeText=this._onChangeText.bind(this) />
                    </View>
                </TouchableOpacity>