React Native android TextInput 無法顯示鍵盤

Question

我在反應原生 textInput 時遇到了一些問題。

在我添加 createBottomTabNavigation 之前，TextInput 工作正常。 它在 IOS 上運行良好，但在 Android 上運行良好。 我創建了一個示例組件，問題仍然存在。 這里的問題：

1. 當在 SamplePage 組件上單擊 TextInput 字段時，頁面只是有點閃爍並且鍵盤撤退。

這是我真正的 android 設備上的問題圖像： react-native android 應用程序

這是我的代碼：

import React from 'react';
import 'react-native-gesture-handler';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ContextApp from '../../context/contextApp';
import PremiumScreen from './premiumScreen';
import SettingsPage from '../setting/settingsPage';
import ProfileContainer from '../profile/profileContainer';


  const MainPage = () => {

    const Pages = () => {
      return (
        <SafeAreaView>
        <StatusBar barStyle="dark-content" 
        backgroundColor="white"/>
                <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                alwaysBounceVertical={false}
                style={styles.scrollView}>
                <View style={styles.container}>
                  <View style={styles.partsView}>
                      <Text style={styles.sectionTitle}>Call Someone Today!</Text>
                      <View style={styles.switch}>
                          <Text style={styles.sectionDescription}>Go Online! </Text>
                          <Switch
                              style={styles.switchButton}
                              trackColor={{ false: "#767577", true: "#81b0ff" }}
                              thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
                              ios_backgroundColor="#3e3e3e"
                              onValueChange={toggleSwitch}
                              value={isEnabled}
                          />
                      </View>
                      <Text style={styles.sectionTitle}>OR</Text>
                  </View>
                </View>
                </ScrollView>
        </SafeAreaView>
        )
      }
    const SamplePage = () => {
      return (
        <View>
        <TextInput
          placeholder="Can't type me"
          style={{
            backgroundColor: 'white',
            width: '100%',
            height: 40,
            paddingLeft: 15,
            fontSize: 20,
            paddingBottom: 5,
            paddingTop: 5,
            color: 'grey'
          }}></TextInput>
        </View>
      )
    }
      const Tab = createBottomTabNavigator();
    return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName: string;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-people'
                : 'ios-people';
            } else if (route.name === 'Premium') {
              iconName = focused ? 'ios-star' : 'ios-star-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-settings' : 'ios-settings';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'ios-contact' : 'ios-contact';
            } else if (route.name === 'SamplePage') {
              iconName = focused ? 'ios-star' : 'ios-star-outline';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
      <Tab.Screen name="Home" component={Pages} />
      <Tab.Screen name="Premium" component={PremiumScreen} />
      <Tab.Screen name="Settings" component={SettingsPage} />
      <Tab.Screen name="Profile" component={ProfileContainer} />
      <Tab.Screen name="SamplePage" component={SamplePage} />
      </Tab.Navigator>
    </NavigationContainer>
      );
  };

const styles = StyleSheet.create({
    scrollView: {
      height: '100%',
    },
    // rest of styles
  });
  
  export default MainPage;

我的依賴：

  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/picker": "^1.6.4",
    "@react-navigation/bottom-tabs": "^5.5.1",
    "@react-navigation/native": "^5.2.6",
    "@react-navigation/stack": "^5.3.2",
    "@types/react-native-vector-icons": "^6.4.5",
    "@types/shortid": "0.0.29",
    "@types/yup": "^0.29.3",
    "axios": "^0.19.2",
    "formik": "^2.1.4",
    "moment": "^2.27.0",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-image-crop-picker": "^0.32.0",
    "react-native-image-picker": "^2.3.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-permissions": "^2.1.5",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^1.0.0",
    "react-native-screens": "^2.7.0",
    "react-native-sideswipe": "^1.5.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^9.4.0",
    "shortid": "^2.2.15",
    "yup": "^0.29.1"
  },

需要一些幫助來解決這個問題！ 提前致謝！

Answer 1

找到了我的答案的解決方案。 寫下來以防有人遇到我所做的事情。

Go 到android/app/src/main/AndroidManifest.xml並更改以下內容：

    android:windowSoftInputMode="adjustResize"

至

    android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

重建您的 android 應用程序。