Question

我已经创建了一个React-Native应用程序，并想要设置导航。我使用NavigationContainer创建了文件，我认为自己已正确完成操作，但是在更换屏幕时遇到了问题。我没有在Expo或bundler中发生任何实际错误，但是尽管标题更改了，但请求的屏幕的显示还是没有完成。所以我觉得我在代码中丢失了一些东西。我知道我犯了一个错误，但是我需要您帮助我解决并解决它...谢谢您的时间和帮助。

导航：

    import React from 'react'
    import { Image } from 'react-native'
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
    import { createStackNavigator} from "@react-navigation/stack"
    import { NavigationContainer } from '@react-navigation/native'
    import Authentication from '../../Screens/Authentication'
    import Login from '../../Screens/Authentication'
    import Signup from '../../Screens/Authentication'
    import Tools from '../../Screens/Tools'
    import Dashboard from '../../Screens/Dashboard'
    import Settings from '../../Screens/Settings'
    import Scan from '../../Screens/Tools'
    import Ean13 from '../../Screens/Tools'
    import Welcome from '../../Screens/Welcome'
    import i18n from '../../src/i18n'
    
    const Tab = createBottomTabNavigator();
    const Stack = createStackNavigator();
    
    function ScreenNavigator() {
      return(
    <Stack.Navigator>
      <Stack.Screen name = 'Authentication' component = {Authentication}/>
      <Stack.Screen name = 'Login' component = {Login}/>
      <Stack.Screen name = 'Signup' component = {Signup}/>
      <Stack.Screen name = 'Tools' component = {Tools}/>
      <Stack.Screen name = 'Scan' component = {Scan}/>
      <Stack.Screen name = 'Ean13' component = {Ean13}/>
      <Stack.Screen name = 'Dashboard' component = {Dashboard}/>
      <Stack.Screen name = 'Settings' component = {Settings}/>
      <Stack.Screen name = 'Welcome' component = {Welcome}/>
    </Stack.Navigator>
      )
    }

 function AppNavigation() {
      return (
        <NavigationContainer>
          <Tab.Navigator initialRouteName="Feed"
                         tabBarOptions={{activeTintColor: '#F78400'}}>
            <Tab.Screen
              name={i18n.t("app.auth")}
              component={ScreenNavigator}
              options={{
                  tabBarIcon: ({ focused, horizontal, tintColor }) => {
                    return (
                      <Image
                        source={require("../../assets/images/authentication.jpg")}
                        style={{ width: 20, height: 20 }}
                      />
                    );
                  }
              }}
            />
            <Tab.Screen
              name={i18n.t("app.dash")}
              component={Dashboard}
              options={{
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                  return (
                    <Image
                      source={require("../../assets/images/dashboard.png")}
                      style={{ width: 20, height: 20 }}
                    />
                  );
                }
              }}
            />
            <Tab.Screen
              name={i18n.t("app.tools")}
              component={Tools}
              options={{
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                  return (
                    <Image
                      source={require("../../assets/images/tools.png")}
                      style={{ width: 20, height: 20 }}
                    />
                  );
                }
              }}
            />
            <Tab.Screen
              name={i18n.t("app.settings")}
              component={Settings}
              options={{
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                  return (
                    <Image
                      source={require("../../assets/images/settings.png")}
                      style={{ width: 20, height: 20 }}
                    />
                  );
                }
              }}
            />
          </Tab.Navigator>
        </NavigationContainer>
      )
    }
export default {AppNavigation, ScreenNavigator};

Authentication.js：

import React from 'react';
import { Text, View, Button, } from 'react-native'
import Login from './Login'
import Signup from './Signup'
import styles from '../../assets/styles'
import i18n from '../../src/i18n'

export default function Authentication({ navigation }) {
  return (
    <View style={styles.container}>
      <Signup/>
        <Button title= "Déjà inscrit ? Cliquez ici pour vous identifier"
                onPress={() => navigation.navigate('Login')}
        />
    </View>
  );
}

Login.js

import React, { Component } from 'react';
import { Text, Alert, Button, View, StyleSheet } from 'react-native';
import { TextInput } from 'react-native-paper';
import styles from '../../assets/styles';

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }

  go = () => {
           const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            if (reg.test(this.state.email) === true){
               alert('valid');
           }
           else{
               alert();
           }

  }

  onLogin() {
    const { username, password } = this.state;

    Alert.alert('Credentials', `${username} + ${password}`);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.inputext}>Login Form</Text>
        <TextInput
          value={this.state.username}
          onChangeText={(username) => this.setState({ username })}
           label='Email'
          style={styles.input}
        />
        <TextInput
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          label='Password'
          secureTextEntry={true}
          style={styles.input}
        />

        <Button
          title={'Login'}
          style={styles.input}
          onPress={this.onLogin.bind(this)}
        />
      </View>
    );
  }
}

首先，我在“身份验证”屏幕中：

当我单击底部按钮（进入登录页面）时，出现以下提示：在标题中您会看到登录屏幕的名称，但显示的仍是“身份验证”：

Answer 1

我认为您的导航正确，因为标题已更改为登录

问题可能来自“ styles.container”，导致登录屏幕的主体没有宽度/高度。

您可以通过在View上添加onLayout来了解登录屏幕的宽度/高度，从而测量登录屏幕的主体，也可以使用常量+背景颜色设置登录屏幕的宽度，高度以进行调试。

Answer 2

TL; DR =>检查您的导入路径，您可能复制粘贴了先前的导入内容以进行新的导入，而忘记了更改路径

我有同样的问题。发生这种情况的原因是因为我复制粘贴了

从“ ./Components/Search;

导入搜索

进行其他导入：

从“ ./Components/Search”中导入FilmDetail；

我忘记将“ ./Components/ 搜索”更改为./Components/FilmDetail

反应导航中未显示的屏幕

2 个答案:

TL; DR =>检查您的导入路径，您可能复制粘贴了先前的导入内容以进行新的导入，而忘记了更改路径