React Native 小记 - TouchableOpacity 单次点击无效

发表于 更新于 阅读次数：

一般是焦点问题，解决方法：即在 ScrollView 标签内，根据情况设置其 keyboardShouldPersistTaps 属性值为 always 或者 handled 。详细解决过程如下：

0x00 描述

收到测试人员提交的 Bug：帐号密码输入完毕按返回键关闭键盘后，点击登录没反应，再点一次才执行登录操作。网上类似的情况还有 “当点击 TouchableOpacity 时，要点击两下才会触发 onPress() ”、“在 ScrollView 中 TouchableOpacity 需要在 TextInput 失去焦点后才能点击”等。

0x01 问题查找

作为一个 Android 开发者，看到情况描述，联想到是焦点问题。类似于 Android 原生开发的『ListView 的 Item 中 包含 EditText Button 时：EditText 与 Button 如何获取焦点、无法点击、ListView 不能滑动等』。

由于我遇到的是 ScrollView 使用时出现的问题，查看下 scrollview 的官方文档 发现有个 keyboardShouldPersistTaps 的属性，用于处理此类情况。

此外，在 stackoverflow 上也搜索到相关的回答，说是 ListView 也有此属性，但我本地 react-native-0.57.2 ListView 源码中并没有此属性。

0x02 解决方案

再次看文档：（ 官方文档 | 中文文档 ）

scrollview @ keyboardShouldPersistTaps

如果当前界面有软键盘，那么点击 ScrollView 后是否收起键盘，取决于本属性的设置。

  • 'never' （默认值），点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
  • 'always'，键盘不会自动收起，ScrollView 也不会捕捉点击事件，但子组件可以捕获。
  • 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有TextInput 的情况下你应该选择此项。
  • false，已过时，请使用 'never' 代替。
  • true，已过时，请使用 'always' 代替。

经测试，使用 always 或者 handled 均可解决发生的问题，由于我这里是 ScrollView 内部存在多个 TextInput，故选择 handled 值。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<ScrollView
	style={styles.mScrollView}
	keyboardShouldPersistTaps={'handled'}
	>
	<View style={styles.root}>
		<View style={styles.userRoot}>
			<Text style={styles.userRootV1}>用户名：</Text>
			<View style={{
                            flex: 1,
                            borderBottomColor: '#f0f0f0',
                            borderBottomWidth: 1
                        }}>
                            <LessBorderTextInput
                                style={styles.userRootV2}
                                multiline={false}
                                placeholder={'请输入用户名'}
                                placeholderTextColor={'#ccc'}
                                autoFocus={false}
                                onChangeText={(newText) => this.updateUser(newText)}
                                returnKeyType={'next'}
                                onSubmitEditing={() => {
                                    this._input.focus();
                                }}
                            />
                        </View>
                    </View>
                    <View style={styles.userPwdRoot}>
                        <Text style={styles.userPwdRootV1}>密码：</Text>
                        <View style={{
                            flexDirection: 'row',
                            flex: 1,
                            borderBottomColor: '#f0f0f0',
                            borderBottomWidth: 1,
                            alignItems: 'center',
                        }}>
                            <LessBorderTextInput
                                style={styles.userPwdRootV2}
                                placeholder={'请输入密码'}
                                multiline={false}
                                placeholderTextColor={'#ccc'}
                                secureTextEntry={!this.state.showPwd}
                                onChangeText={(newText) => this.updatePwd(newText)}
                                returnKeyType={'done'}
                                ref={(c) => this._input = c}
                            />
                            <TouchableOpacity
                                onPress={() => this._showPwd(!this.state.showPwd)}>
                                <Image
                                    source={pwd_icon}
                                    style={styles.userPwdRootV3}
                                />
                            </TouchableOpacity>
                        </View>
                    </View>
	<TouchableOpacity
		onPress={() => _login()}>
		<Text style={styles.userSignIn}>登录</Text>
	</TouchableOpacity>
</ScrollView>

其中 LessBorderTextInput 是我参考官方文档封装后无边框（方便实现各种 UI 设计要求）的 TextInput ，并且增加了支持 ref 属性的功能，可用于多处需要填写内容时直接在键盘上点击下一项即自动进入下一项的输入。参见博客的相关文章。

0x03 总结

发现问题，借助搜索工具能很快得到解决方案，我这里也特地把解决方法直接写到了文章的开头，至于如何解决问题，是给想了解原因的人准备的一个思路和说明。如果你有更好的见解，欢迎和我一起讨论。

如果有什么建议或者问题可以随时联系我，共同探讨学习：