[英]React native textInput scrollView android
I am trying to write a very simple app to test react native. 我正在尝试编写一个非常简单的应用程序来测试本机响应。
I have some TextInput components in a big ScrollView, as a register formulary. 我在大的ScrollView中有一些TextInput组件,作为寄存器公式。
Everything works fine, but when I scroll clicking on a TextInput, it doesn't scroll. 一切正常,但是当我滚动单击TextInput时,它不会滚动。
I can only scroll through the page when I click in blank spaces. 当我单击空白时,只能滚动页面。 Any idea of how to do it?
有什么想法吗?
Thanks. 谢谢。
<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>
I had the same problem and after searching for a while no answer helped me; 我遇到了同样的问题,搜索了一段时间后,没有答案对我有所帮助; so I solved it myself by putting a
<TouchableWithoutFeedback />
over each <TextInput>
and sending the touch event back to the <TextInput />
: 所以我自己解决了这个问题,方法是在每个
<TextInput>
放置一个<TouchableWithoutFeedback />
并将touch事件发送回<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>
You can create a custom component which wraps TextInput like that and use them in your ScrollViews. 您可以创建一个自定义组件,将其像这样包装TextInput并在ScrollViews中使用它们。
I had solve the problem like this: 我已经解决了这样的问题:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.