React Native框架详情页面返回上一页输入框聚焦问题

77 阅读 0 评论 51 点赞

我是靠谱客的博主糟糕秋天，这篇文章主要介绍React Native框架详情页面返回上一页输入框聚焦问题，现在分享给大家，希望可以做个参考。

App运行在扫码枪系统上，详情页提交按钮提交成功之后返回上一页使用Ant Design Mobile 输入框组件即InputItem组件设置聚焦但键盘无法弹出，换成React Native原生输入框组件即TextInput组件在返回上一页的DeviceEventEmitter.addListener里设置ref.focus();可聚焦并弹出键盘。

组件代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
<TextInput
placeholder="扫描设备..."
onChangeText={value => {
this.setState({
equipmentNumber: value,
});
}}
onBlur={() => { this.inpScanBlurHandle() }}
ref="equipmentInput" // 设置ref值
defaultValue={equipmentNumber}
/>

使用代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
componentWillMount() {
let that = this;
this.listener = DeviceEventEmitter.addListener(
'globalEmitter_refresh_page',
function () {
that.setState(
{
equipmentNumber: "",
dataList: [],
}, () => {
that.refs.tableRef.updateTable();
setTimeout(() => {
that.refs.equipmentInput.focus();
}, 100);
}
);
},
);
}