为什么Android键盘会触发我的导航

时间:2020-05-04 19:04:44

标签: android react-native react-navigation react-navigation-stack react-navigation-drawer

好的,这是问题。当我按下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"}
    />
);

我试图恢复所有糟糕的代码,但这是这样的。我认为省略的零件并不重要。

0 个答案:

没有答案