android - 为什么 android 键盘会触发我的导航返回

Question

好的，这就是问题所在。当我按下 android 输入插入文本时，键盘出现，我的屏幕导航回来。这仅发生在 Android 上。每次输入都会发生这种情况，如果我在打开键盘的情况下启动屏幕并关闭它，则会出现同样的问题。我知道我没有使用最新版本的 react-native 或库。

这是我的环境和 package.json。

"react-native": "0.61.3"
"@react-native-community/datetimepicker": "^2.2.2",
"@react-native-community/masked-view": "^0.1.5",
"@react-navigation/bottom-tabs": "^5.0.0-alpha.34",
"@react-navigation/core": "^5.0.0-alpha.32",
"@react-navigation/drawer": "^5.0.0-alpha.36",
"@react-navigation/material-bottom-tabs": "^5.0.0-alpha.31",
"@react-navigation/material-top-tabs": "^5.0.0-alpha.30",
"@react-navigation/native": "^5.0.0-alpha.24",
"@react-navigation/stack": "^5.0.0-alpha.58",

环境

SO: Ubuntu 20.04 LTS (Also tried on OSX)
node: 14.1.0
API Android: 28
npm:6.14.4

该应用程序看起来像这样。（不完全是代码，我刚加入这个项目，代码真是让人头疼。）

//App.js
<Tab.Navigator
  initialRouteName={'HOME'}
  tabBarOptions={{
  activeTintColor: 'white',
  style: {backgroundColor: 'black'},
}}>
  <Tab.Screen
    name="Account"
    component={props => <ProfileTab {...props} />}

  >
  </Tab.Screen>
</Tab.Navigator>


//ProfileTab.js

<Stack.Navigator
  mode="modal"
  headerMode="none"
  initialRouteName="SessionFilter"
>
  <Stack.Screen
    component={props => (
     <Login
       close={() => {
        if (!currentUser) navigation.navigate('SessionFilter');
         navigation.goBack();
        }}
       sendToRegister={() => {
        navigation.goBack();
        navigation.navigate('Registry');
       }}
     />
   )}
   name="Login"
 />
</Stack.Navigator>


//Login.js

return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
      <ScrollView
        contentContainerStyle={{
          backgroundColor: "white",
          paddingHorizontal: 15,
          minWidth: 350,
          alignItems: "center",
          flex: 1,
          minHeight: Dimensions.get("window").height + 30,
        }}
      >
        <TextField>
      </ScrollView>
    </SafeAreaView>
  );
};

//TextField.js
import React from 'react';
import { TextField } from 'react-native-material-textfield';

export const TextField = (props) => (
    <TextField
        {...props}
        tintColor="black"
        textColor="black"
        fontSize={12}
        autoCapitalize="none"
        onChangeText={text => props.onChange({ target: { value: text } })}
        titleTextStyle={{ fontSize: 10 }}
        contentInset={{ label: 0 }}
        secureTextEntry={props.type && props.type === "password"}
    />
);

我试图恢复所有糟糕的代码，但它是这样的。省略了我认为不重要的部分。

标签： androidreact-nativereact-navigationreact-navigation-stackreact-navigation-drawer