React Native安卓TextInput无法显示键盘

Question

我遇到了一些React Native TextInput方面的问题。

在添加createBottomTabNavigation之前，TextInput是正常工作的。在IOS上它表现得很好，但在Android上却不行。我创建了一个简单的组件，问题依旧存在。 问题如下:

1. 当在SamplePage组件中点击TextInput字段时，页面会闪烁并且键盘会消失。

这是我真实的安卓设备上出现的问题图像:react-native android app

这是我的代码:

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"
  },

需要帮助解决这个问题！先谢谢了！

- Ping Kee Ng

---

也许你需要的是KeyboardAvoidingView。 - 高鵬翔

KeyboardAvoidingView没有解决问题。无论如何，谢谢 :) - Ping Kee Ng

你找到解决方案了吗？当我点击文本输入时，键盘会弹出然后又关闭。键盘无法保持打开状态。 - Bilal Yaqoob

Answer 1

找到了解决方法，写下来以防万一有人遇到同样的问题。

前往android/app/src/main/AndroidManifest.xml并更改以下内容：

    android:windowSoftInputMode="adjustResize"

到

    android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

重建您的Android应用程序。

- Ping Kee Ng

---

这是一个很好的解决方案，非常感谢。 - Roshan Wickramaarachchi

有没有任何方法可以不触碰本地代码？ - Carmine Tambascia