android - 如果键盘打开，TouchableOpacity 的 onPress() 函数首先不起作用

Question

我使用 TouchableOpacity 作为我的提交按钮，在填写表单（登录/注册/...）后，当我单击提交按钮（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>

标签： androidreact-nativekeyboardtouchableopacity

Answer 1

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

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