React Native - Android 键盘在每次按键时消失

Question

我正在开发一个用于简单计算的 React Native 应用程序，我一直面临着我已经工作了几天的问题。

下面的代码是一个简单的 react-native 应用程序，它接受 input1 和 input2 作为数字，并动态生成 input1 和 input2 的总和结果。

但问题是每当我在 input1 或 input2 字段中键入一些值时，android 键盘在每次击键时都会消失。

请在下面找到代码和屏幕截图。

App.js

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

const SimpleCalc = () => {
    const [ input1, setInput1 ] = useState(0);
    const [ input2, setInput2 ] = useState(0);

    const HomeScreen = () => {
        return (
            <View style={{ padding: 20 }}>
                <View>
                    <Text style={{ fontSize: 20, color: '#000' }}>{ parseFloat(input1) + parseFloat(input2) }</Text>
                </View>
                <View>
                    <TextInput 
                        placeholder="Enter Input 1"
                        onChangeText = {(text) => { setInput1(text); }}
                        value = {input1 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                    <TextInput 
                        placeholder="Enter Input 2"
                        onChangeText = {(text) => { setInput2(text); }}
                        value = {input2 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                </View>
            </View>
        )
    }

    const SettingScreen = () => {
        return (
            <Text>Setting Screen</Text>
        );
    }
    return (
        <NavigationContainer>
            <Tab.Navigator>
                 <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Calculator', activeTintColor: '#6F2DA8', headerShown: false }} />
                 <Tab.Screen name="Settings" component={SettingScreen} options={{ tabBarLabel: 'Settings', activeTintColor: '#6F2DA8', headerShown: false }} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default SimpleCalc;

Package.json

{
  "name": "SimpleCalc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "install": "^0.13.0",
    "npm": "^8.3.1",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-material-textinput": "^1.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

截图

请帮我解决这个问题。谢谢

Answer 1

用这个替换你的代码

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

const SimpleCalc = () => {
    

    const HomeScreen = () => {
      const [ input1, setInput1 ] = useState(0);
      const [ input2, setInput2 ] = useState(0);
        return (
            <View style={{ padding: 20 }}>
                <View>
                    <Text style={{ fontSize: 20, color: '#000' }}>{ parseFloat(input1) + parseFloat(input2) }</Text>
                </View>
                <View>
                    <TextInput 
                        placeholder="Enter Input 1"
                        onChangeText = {(text) => { setInput1(text); }}
                        value = {input1 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                    <TextInput 
                        placeholder="Enter Input 2"
                        onChangeText = {(text) => { setInput2(text); }}
                        value = {input2 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                </View>
            </View>
        )
    }

    const SettingScreen = () => {
        return (
            <Text>Setting Screen</Text>
        );
    }
    return (
        <NavigationContainer>
            <Tab.Navigator>
                 <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Calculator', activeTintColor: '#6F2DA8', headerShown: false }} />
                 <Tab.Screen name="Settings" component={SettingScreen} options={{ tabBarLabel: 'Settings', activeTintColor: '#6F2DA8', headerShown: false }} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default SimpleCalc;

React Native - Android 键盘在每次按键时消失

React Native - Android Keyboard dismisses on each keypress

react-native

react-navigation