反应原生 textInput scrollView android答案

【问题标题】：React native textInput scrollView android反应原生 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>

【问题讨论】：

stackoverflow.com/questions/39745442/…的可能重复
这个问题你解决了吗？
我遇到了这个问题，原来是因为我在TextInput的样式中指定了height，但是TextInput的内容超过了那个高度在 Android 而不是 iOS 中（因为系统字体覆盖了我的字体样式）。万一其他人遇到这个问题，可以通过删除硬编码的高度或增加它来修复它，以确保它可以包含内容而不会溢出。

标签： javascript reactjs react-native scrollview textinput

【解决方案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>

【讨论】：