React原生文本输入scrollView android

React native textInput scrollView android

本文关键字：scrollView android 输入 文本 原生 React      更新时间：2023-09-26

我想写一个非常简单的应用程序来测试react native。

我有一些TextInput组件在一个大ScrollView，作为一个寄存器公式。

一切正常，但当我滚动点击一个文本输入，它不滚动。

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

谢谢。

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

我有同样的问题，搜索了一段时间后没有答案帮助我;所以我自己解决了这个问题，在每个<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中使用它们。

我是这样解决这个问题的:

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

相关文章：