如果键盘打开，TouchableOpacity 的 onPress() 函数最初不起作用

Question

我使用 TouchableOpacity 作为我的提交按钮，在填写表单后（Login/Registration/...）当我点击提交按钮（TouchableOpacity）时，键盘隐藏（如果打开），然后我需要再次按下提交按钮，然后调用 onPress 方法。

我想要实现的是，如果我点击提交按钮，onPress() 方法应该被调用，无论键盘是否打开。我必须点击两次才能提交看起来不太好的表格。

此外，我还没有仅在 IOS、android 上测试过此行为。

编辑：1

登录屏幕代码=>

<KeyboardAvoidingView>
   <ScrollView>
    <View style={styles.container}>
    <View style={styles.container_one}>
        <Image
        style={{ height: 100, marginTop: 40 }}
        source={require("../images/logo.png")}
        />
    </View>

    <View style={styles.container_three}>
        <View>
        <View style={styles.container_two}>
            <Text style={styles.text_style_two}>Login</Text>
        </View>

        <View>
            <Text style={styles.text_style_three}>
            Please enter mobile number
            </Text>
            <TextInput
            style={styles.text_input_1}
            autoCapitalize="none"
            keyboardType="numeric"
            onChangeText={text => {
                this.setState({
                username: text
                });
            }}
            value={this.state.username}
            />
        </View>

        <View>
            <Text style={styles.text_style_three}>
            Please enter your password
            </Text>
            <TextInput
            style={styles.text_input_1}
            secureTextEntry={true}
            autoCapitalize="none"
            onChangeText={text => {
                this.setState({
                password: text
                });
            }}
            value={this.state.password}
            />
        </View>
        <View
            style={{
            width: screenWidth / 1.3,
            flexDirection: "row",
            justifyContent: "center"
            }}
        >
            <View>
            <TouchableOpacity
                style={styles.button_1}
                onPress={() => {
                if (this.state.username == "") {
                    alert("Username can not be blank");
                } else if (this.state.password == "") {
                    alert("Password can not be blank");
                } else {
                    this.submitLogin(
                    this.state.username,
                    this.state.password
                    );
                }
                }}
            >
                <Text style={CommonStyles.buttonText}>Login</Text>
            </TouchableOpacity>
            </View>
        </View>
        </View>
    </View>
    <View style={{ alignItems: "center" }}>
        <View style={{ marginBottom: 10 }}>
        <Text style={{ fontSize: 20 }}>-OR-</Text>
        </View>
        <View style={{ marginBottom: 10 }}>
        <TouchableOpacity
            onPress={() => {
            this.props.navigation.navigate("Registration");
            }}
        >
            <Text style={styles.text_style_one}>Sign up here</Text>
        </TouchableOpacity>
        </View>
    </View>
    <View style={{ alignItems: "center" }}>
        <View style={{ marginBottom: 10 }}></View>

        <View style={{ marginBottom: 10 }}>
        <TouchableOpacity
            onPress={() => {
            this.props.navigation.navigate("ForgotPassword");
            }}
        >
            <Text style={styles.text_style_five}>forgot password?/Text>
        </TouchableOpacity>
        </View>
    </View>
    </View>
  </ScrollView>
</KeyboardAvoidingView>

Answer 1

只需将 keyboardShouldPersistTaps={'handled'} 添加到您的 ScrollView

<ScrollView keyboardShouldPersistTaps={'handled'}>
 ......
 ..............
</ScrollView>

如果键盘打开，TouchableOpacity 的 onPress() 函数最初不起作用

onPress() function of TouchableOpacity does not work at first if the keyboard is open

keyboard

android

react-native

touchableopacity