ReactNative[IOS]点击空白位置没法隐藏键盘

最近在开发项目的需求中,测试同窗提了一个bug,在以下页面中,有三个输入框,在iOS手机上,输入完以后,没法隐藏键盘;安卓手机上,键盘都有收起按钮,因此没有这个问题。
在这里插入图片描述布局

想到的解决方案:
一、让输入框失去焦点,
二、点击背景空白位置,监听键盘Keyboard事件,调用dismiss()方法隐藏软键盘。
以上两个方案,都须要写一堆代码,突然想到以前有相似的页面需求,从新review了一下代码,发现只须要在最外层布局加一个Scrollview便可解决。测试

<ScrollView style={{flex: 1}}>
                    <View style={styles.container}>
                        ... 其余代码
                        <View style={{
                            marginTop: 17,
                            height: 300,
                            paddingHorizontal: 12,
                            paddingTop: 12,
                            paddingBottom: 24,
                            width: deviceWidth - 24,
                            backgroundColor: '#F9F9FB',
                            marginHorizontal: 12
                        }}>
                            <TextInput
                                style={{padding: 0}}
                                multiline={true}
                                maxLength={800}
                                textAlignVertical={'top'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请填写您的问题或建议'}
                                value={this.state}
                                placeholderTextColor={'#999999'}
                                onChangeText={(text) => this.setState({
                                    text
                                })}
                            />
                        </View>

                    </View>
                </ScrollView>

欢迎关注我的公众号:君伟说。
在这里插入图片描述flex

相关文章
相关标签/搜索