好的,这是问题。当我按下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"}
/>
);
我试图恢复所有糟糕的代码,但这是这样的。我认为省略的零件并不重要。