React Native-弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决

image.png

Bug情况描述:React Native项目中,点击按钮A出现弹框浮层,弹框中需要TextInput输入数字,键盘浮起来;这时候点击 取消按钮L 或者 确定按钮R,只是让键盘收起,但是并没有触发 取消 或 确定 的事件,必须要再点击第二次才可以触发。另外,当输入框有焦点的情况下,点击 屏幕任意位置(除了键盘),可使键盘收起隐藏;

期待效果:当输入框输完内容后,光标焦点仍然存在,键盘也未消失,这时候点击一次取消按钮L即可让弹框层和键盘同时隐藏;点击一次确定按钮R内容即可显示到对应位置。

解决方案:
利用ScrollView标签的keyboardShouldPersistTaps={'always'}即可解决,
查看TextInput是否包裹在ScrollView标签中,是则添加keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps={'always'}>
    <Block style={styles.interval}>
            <ListItem title='头像'/>
            <ListItem title='昵称'
                      tip={this.state.nickname}
                      onPress={() => this.refs.alert && this.refs.alert._showModal()}
            />
                <CustomAlert ref='alert'
                             confirmClick={() => this._confirmValue('nickname', this.state.tempNickname)}
                             cancelClick={() => this._cancelValue('nickname', this.state.nickname)}>
                    <TextInput style={styles.inputStyle} autoFocus
                               onChangeText={text => this._handleChangeText('tempNickname', text)}
                               value={this.state.tempNickname}
                    />
                </CustomAlert>
        </Block>
</ScrollView>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容