Question

export default function HomeScreen() {
    const [length, setLength] = useState("");
    const [breadth, setBreadth] = useState("");
    const [totalCost, setTotalCost] = useState("0");

    const handleLengthChange = (text) => {
        setLength(text);
    };
    const handleBreadthChange = (text) => {
        setBreadth(text);
    };


    return (
        <View style={globalStyles.container}>
            <ScrollView>
                <Card>
                    <Dimension
                        length={length}
                        breadth={breadth}
                        handleLengthChange={handleLengthChange}
                        handleBreadthChange={handleBreadthChange}
                    />
                    <QualitySelector />
                    <Rate />
                </Card>
                <Card>
                    <Result totalCost={totalCost} />
                </Card>
            </ScrollView>

            <View style={globalStyles.absoluteButton}>
                <FlatButton />
            </View>
        </View>
    );
}

export default function Dimension({
length, 
breadth, 
handleLengthChange, 
handleBreadthChange
}) {
    return (
        <View style={styles.sectionContainer}>
            <Text style={globalStyles.sectionTitle}>Dimension</Text>
            <View style={styles.sectionOption}>
                <Text style={globalStyles.inputTitle}>Length</Text>
                <TextInput
                    value={length}
                    style={{ ...globalStyles.inputField, ...styles.inputField }}
                    keyboardType="numeric"
                    onChangeText={(text) => handleLengthChange(text)}
                />
                <Text style={styles.inputUnit}>meter</Text>
            </View>
            <View style={styles.sectionOption}>
                <Text style={globalStyles.inputTitle}>Breadth</Text>
                <TextInput
                    value={breadth}
                    style={{ ...globalStyles.inputField, ...styles.inputField }}
                    keyboardType="numeric"
                    onChangeText={(text) => handleBreadthChange(text)}
                />
                <Text style={styles.inputUnit}>meter</Text>
            </View>
        </View>
    );
}

我正在与博览会建立一个项目。我的项目碰巧有一个表单字段，但是我没有使用任何库来处理表单。每当我尝试点击TextInput字段之一时，键盘就会立即出现并消失。但是之后，如果我再次在输入字段中点击，则键盘仍会显示在屏幕上。我似乎无法弄清楚问题出在哪里。我在Google上进行了很多搜索，但没有一个结果可以讨论我提到的问题。

Answer 1

发现问题仅与我的设备有关。可能是博览会中的某种错误。如果有人遇到相同的问题，请尝试在多个设备上运行您的应用程序。如果问题仍然存在，请弹出您的项目，然后使用裸本机本机运行它。

React Native：键盘在首次加载时关闭

1 个答案: