Question

当我点击搜索键盘时出现。但是，当我单击取消一段时间后，键盘会在我看到主页时保持不变。

从搜索页面向后导航仍然会在短时间内显示键盘如何将其删除

import React, { Component } from "react";
import {
    StyleSheet,
    View,
    Text,
    Button,
    Alert,
    Image,
    TextInput
} from "react-native";
import { connect } from "react-redux";
import { SafeAreaView } from "react-navigation";

import { scale, verticalScale } from "@helpers/scale";
import Colors from "@app/app.colors";
import ClickView from "@components/widgets/ClickView";
import Fonts from "@config/fonts";
import images from "@assets/images";
import * as uiconstant from "@constants/ui.constant";

export class SearchScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ""
        };
    }

    static navigationOptions = {
        tabBarVisible: false
    };

    renderSearchTextContainer() {
        return (
            <View style={styles.searchTextContainer}>
                <Image
                    style={{ marginLeft: scale(6) }}
                    source={images.searchIcon}
                />
                <TextInput
                    style={{ flex: 1, marginLeft: scale(7), height: scale(40) }}
                    placeholder="e.g., Cryptography"
                    onChangeText={text => this.setState({ text })}
                    value={this.state.text}
                    keyboardType="default"
                    returnKeyType="search"
                    underlineColorAndroid="transparent"
                    autoFocus={true}
                    multiline={false}
                    onSubmitEditing={_ => {
                        console.log("return tapped");
                        if (
                            this.state.text !== "" &&
                            this.state.text !== null
                        ) {
                            this.props.navigation.navigate("searchResult", {
                                searchText: this.state.text
                            });
                        }
                    }}
                />
                <ClickView
                    style={styles.removeButtonStyle}
                    onPress={_ => {
                        // let oldString = this.state.text;
                        // newString = oldString.slice(0, -1);
                        this.setState({
                            text: ""
                        });
                    }}
                >
                    <Image source={images.cancelIcon} />
                </ClickView>
            </View>
        );
    }

    render() {
        return (
            <SafeAreaView style={[styles.safeAreaContainer]}>
                <View style={styles.container}>
                    <View style={styles.searchContainer}>
                        {this.renderSearchTextContainer()}
                        <ClickView
                            style={styles.cancelButtonStyle}
                            onPress={_ => {
                                this.props.navigation.goBack();
                            }}
                        >
                            <Text style={styles.cancelTextStyle}>Cancel</Text>
                        </ClickView>
                    </View>
                </View>
                <View
                    style={{
                        flex: 1,
                        backgroundColor: Colors.backgroundColor
                    }}
                />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: Colors.white
    },
    container: {
        backgroundColor: Colors.white,
        borderBottomWidth: 1.0,
        borderBottomColor: Colors.athensGray
    },
    searchTextContainer: {
        flex: 1,
        flexDirection: "row",
        borderColor: Colors.athensGray,
        borderRadius: 2,
        borderWidth: 1,
        overflow: "hidden",
        alignItems: "center"
    },
    removeButtonStyle: {
        marginLeft: scale(2),
        marginRight: scale(2),
        width: 30,
        height: 30,
        justifyContent: "center",
        alignItems: "center"
    },
    cancelButtonStyle: {
        alignSelf: "center",
        width: scale(52),
        height: scale(37),
        marginLeft: scale(6),
        justifyContent: "center",
        alignItems: "center"
    },
    cancelTextStyle: {
        fontFamily: Fonts.Semibold,
        fontSize: scale(15),
        color: Colors.slateGray
    },
    searchContainer: {
        marginTop: verticalScale(10),
        marginBottom: verticalScale(10),
        height: scale(37),
        marginLeft: scale(14),
        marginRight: scale(17),

        flexDirection: "row"
    }
});

每当我输入搜索文本或甚至只需单击“取消”按钮。在这里，我编写了搜索页面的代码。

Answer 1

您可以从react native导入键盘，它为您提供了多种功能。其中一个是解雇，这个功能可以用来隐藏键盘。因此，无论何时导航屏幕，在导航之前都要调用keyboad的解除功能。你可以这样做： -

import {Keyboard} from "react-native";

当您导航到不同的屏幕时，请在导航前调用以下功能： -

Keyboard.dismiss();

修改

您可以在超过100毫秒后在提交编辑内导航屏幕，以便执行keyboard.dismiss功能，如下所示： -

onSubmitEditing = {_ => { console.log("return tapped"); if (this.state.text !== "" && this.state.text !== null) { Keyboard.dismiss(); setTimeout(_ => { this.props.navigation.navigate("searchResult", {searchText: this.state.text}); }, 100) } }}

Answer 2

使用keyboard.dismiss（）。从原生和调用解除函数中导入键盘。

 import React, { Component } from "react";
 import {
     StyleSheet,
     View,
     Text,
     Button,
     Alert,
     Image,
     TextInput,
    Keyboard
} from "react-native";
import { connect } from "react-redux";
import { SafeAreaView } from "react-navigation";

import { scale, verticalScale } from "@helpers/scale";
import Colors from "@app/app.colors";
import ClickView from "@components/widgets/ClickView";
import Fonts from "@config/fonts";
import images from "@assets/images";
import * as uiconstant from "@constants/ui.constant";

export class SearchScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ""
        };
    }

    static navigationOptions = {
        tabBarVisible: false
    };

    renderSearchTextContainer() {
        return (
            <View style={styles.searchTextContainer}>
                <Image
                    style={{ marginLeft: scale(6) }}
                    source={images.searchIcon}
                />
                <TextInput
                    style={{ flex: 1, marginLeft: scale(7), height: scale(40) }}
                    placeholder="e.g., Cryptography"
                    onChangeText={text => this.setState({ text })}
                    value={this.state.text}
                    keyboardType="default"
                    returnKeyType="search"
                    underlineColorAndroid="transparent"
                    autoFocus={true}
                    multiline={false}
                    onSubmitEditing={_ => {
                        console.log("return tapped");
                        if (
                            this.state.text !== "" &&
                            this.state.text !== null
                        ) {
                            Keyboard.dismiss();
                            setTimeout(()=>this.props.navigation.navigate("searchResult", {
                                searchText: this.state.text
                            }), 500);
                        }
                    }}
                />
                <ClickView
                    style={styles.removeButtonStyle}
                    onPress={_ => {
                        // let oldString = this.state.text;
                        // newString = oldString.slice(0, -1);
                        this.setState({
                            text: ""
                        });
                    }}
                >
                    <Image source={images.cancelIcon} />
                </ClickView>
            </View>
        );
    }

    render() {
        return (
            <SafeAreaView style={[styles.safeAreaContainer]}>
                <View style={styles.container}>
                    <View style={styles.searchContainer}>
                        {this.renderSearchTextContainer()}
                        <ClickView
                            style={styles.cancelButtonStyle}
                            onPress={_ => {
                                this.props.navigation.goBack();
                            }}
                        >
                            <Text style={styles.cancelTextStyle}>Cancel</Text>
                        </ClickView>
                    </View>
                </View>
                <View
                    style={{
                        flex: 1,
                        backgroundColor: Colors.backgroundColor
                    }}
                />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: Colors.white
    },
    container: {
        backgroundColor: Colors.white,
        borderBottomWidth: 1.0,
        borderBottomColor: Colors.athensGray
    },
    searchTextContainer: {
        flex: 1,
        flexDirection: "row",
        borderColor: Colors.athensGray,
        borderRadius: 2,
        borderWidth: 1,
        overflow: "hidden",
        alignItems: "center"
    },
    removeButtonStyle: {
        marginLeft: scale(2),
        marginRight: scale(2),
        width: 30,
        height: 30,
        justifyContent: "center",
        alignItems: "center"
    },
    cancelButtonStyle: {
        alignSelf: "center",
        width: scale(52),
        height: scale(37),
        marginLeft: scale(6),
        justifyContent: "center",
        alignItems: "center"
    },
    cancelTextStyle: {
        fontFamily: Fonts.Semibold,
        fontSize: scale(15),
        color: Colors.slateGray
    },
    searchContainer: {
        marginTop: verticalScale(10),
        marginBottom: verticalScale(10),
        height: scale(37),
        marginLeft: scale(14),
        marginRight: scale(17),

        flexDirection: "row"
    }
});

当我单击取消一段时间后，键盘会保持不动

2 个答案: