Question

我在expo 38.0 react-native应用程序中有一些示例代码，该应用程序具有登录，注册和forgotpwd屏幕。这些屏幕之间的导航由Stack Navigator（使用React Navigation 5.x）控制，并将登录屏幕作为初始屏幕。

堆栈导航器在我的Android手机上可以正常工作，但是在ForgotPwdScreen组件上按“后退”按钮时出现问题。问题在于，登录屏幕显示其内容后，此屏幕上的所有内容突然向下移动了几个像素。在过去的一天里，我做了很多研究，但似乎没有任何效果。我曾尝试在登录屏幕中将内容包装在SafeAreaView中，但这没有帮助。

但是，如果我在App.js中包含ForgotPwdScreen代码，则此问题不再存在。仅当ForgotPwdScreen位于其自己的单独文件中时，才会发生此问题。

完整的代码示例如下：Working code for this issue

有关该问题的视频，请访问Issue of stack navigator

此问题仅发生在android手机上，不适用于iphone。

问题：为什么在ForgotPwdScreen上按下“后退”按钮但仅在ForgotPwdScreen位于单独的js文件中时，完全渲染后，登录屏幕中的内容才突然下移？

代码文件如下。

package.json

{
  "dependencies": {
    "expo-status-bar": "^1.0.2",
    "react-native-screens": "~2.9.0",
    "@react-navigation/stack": "^5.9.1",
    "react-native-reanimated": "~1.9.0",
    "@react-navigation/drawer": "^5.9.1",
    "@react-navigation/native": "^5.7.4",
    "react-native-safe-area-context": "~3.0.7",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/async-storage": "~1.11.0"
  }
}

App.js

import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  ScrollView,
  StatusBar,
  Keyboard,
  ActivityIndicator,
  Platform,
  Image,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createStackNavigator,
  TransitionSpecs,
  HeaderStyleInterpolators,
  CardStackStyleInterpolator,
  CardStyleInterpolators
} from '@react-navigation/stack';
    
import LoginScreen from './components/LoginScreen'
import ForgotPwdScreen from './components/ForgotPwdScreen'

function SignUpScreen () {
    /* Component state. Change someState, setEnteredSomeState and state object as per your scenario. */
    const [someState, setEnteredSomeState] = useState({
        state1: '',
        state2: '',
        state3: false,
    });
    return (
        <View style={styles.container}>
            {/* Set statusbar background color and style so it blends with the screen */}
            <StatusBar backgroundColor="#fff" barStyle="dark-content" />
            <Text style={styles.label}>SignUp  will show here</Text>
        </View>
    );
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
          headerShown: false,
          headerTitleAlign: 'center',
          headerMode: 'screen',
        }}>
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="ForgotPwd"
          component={ForgotPwdScreen}
          options={{ headerShown: true }}
        />
        <Stack.Screen
          name="SignUp"
          component={SignUpScreen}
          options={{ headerShown: true }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  scroll: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputView: {
    width: '80%',
    backgroundColor: '#fff',
    height: 50,
    marginBottom: 20,
    justifyContent: 'center',
    alignSelf: 'center',
    textAlign: 'left',
    padding: 20,
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    marginTop: -20,
  },
  inputText: {
    height: 50,
    color: 'grey',
  },
  loginBtn: {
    width: '70%',
    backgroundColor: '#F26722',
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    marginTop: 40,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: '#F26522',
  },
  loginText: {
    color: 'white',
  },
  forgotText: {
    color: '#337ab7',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop:20,
  },
  signupText: {
    color: '#337ab7',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  forgotBtn: {
    height: 50,
    width:'100%',
    marginTop:10,
  },
  signupBtn: {
    height: 50,
    width:'100%',
    marginTop:20,
  },
  label: {
    textAlign: 'center',
  },
});

export default App;

ForgotPwdScreen.js

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView} from 'react-native';

export default function ForgotPwdScreen() {
  return (
    <View style={styles.container}>
      
        {/* Set statusbar background color and style so it blends with the screen */}
        <StatusBar backgroundColor="#fff" barStyle="dark-content" />
        <Text style={styles.label}>ForgotPwd will show here</Text>
   
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  label: {
    textAlign: 'center',
  },
});

LoginScreen.js

import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  ScrollView,
  StatusBar,
  Keyboard,
  ActivityIndicator,
  Platform,
  Image,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';  


export default function LoginScreen({ route, navigation }) {
  return (
    <View style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scroll}
        keyboardShouldPersistTaps="always">
        <StatusBar backgroundColor="#fff" barStyle="dark-content" />

        <TouchableOpacity
          style={styles.forgotBtn}
          onPress={() => navigation.navigate('ForgotPwd')}>
          <Text style={styles.forgotText}>Forgot Password?</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.signupBtn}
          onPress={() => navigation.navigate('SignUp')}>
          <Text style={styles.signupText}>Signup</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  scroll: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  forgotText: {
    color: '#337ab7',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 20,
  },
  signupText: {
    color: '#337ab7',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  forgotBtn: {
    height: 50,
    width: '100%',
    marginTop: 10,
  },
  signupBtn: {
    height: 50,
    width: '100%',
    marginTop: 20,
  },
});

Answer 1

经过2天的尝试，终于找到了这种奇怪行为的原因。

此问题是由于expo-status-bar中包含的ForgotPwdScreen.js软件包引起的。当我删除了expo-status-bar的导入，而是使用了react-native中的StatusBar组件时，问题就消失了。

因此，显然expo-status-bar存在一些问题。最好不要使用它，而应使用react-native随附的默认StatusBar。

ForgotPwdScreen.js中的原始导入

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView} from 'react-native';

更改了可解决该问题的ForgotPwdScreen.js中的导入

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView, StatusBar} from 'react-native';

react-native博览会应用程序中的Stack Navigator问题

1 个答案: