Javascript 使用UseNavigation（）进行导航

我在理解UseNavigation的用法时遇到了一些问题。我也找不到很多好的例子。我有一个例子，第一个按钮将我们带到注册页面，但我不确定具体如何。我试图编辑它的方式，第二个按钮带我到我的登录页面。 这是我的主页：

import Login from './login/Login'

type HomeScreenProps = {};

export const HomeScreen = observer<HomeScreenProps>(() => {
  const navigation = useNavigation();
  const appStore = useAppStore();

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Hello />
        <Button onPress={() => appStore.hello()}>
          <Text>Change State</Text>
        </Button>
        <Text>The state can also be here: </Text>
        <Text>{appStore.helloWorld}</Text>
        {/* */}
        <Button
          onPress={() => navigation.navigate('Registration')}>
          <Text>Press to register</Text>
        </Button>
        <Button
          //onPress={() => navigation.navigate('Login')}
          >
          <Text>Login</Text>
        </Button>
      </View>
    </View>
  );
});

从导入登录名“./Login/Login”
键入HomeScreenProps={}；
导出常量主屏幕=观察者（（）=>{
const navigation=useNavigation（）；
const appStore=useAppStore（）；
返回(
appStore.hello（）}>
改变状态
国家也可以在这里：
{appStore.helloWorld}
{/* */}
navigation.navigate（'Registration'）}>
按登记
navigation.navigate（'Login'）}
>
登录
);
});

以下是我的登录页面的体系结构：

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label} from 'native-base';
import { StackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { DrawerNavigator } from "react-navigation";
import { createAppContainer } from 'react-navigation';

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

    this.state = {
      username: '',
      password: '',
    };
  }
  render() {
    return (
      <Container>
      <Text >Instaride</Text>
      <Form>
            <Item floatingLabel>
              <Label onChangeText={(text) => this.setState({username: text})}>Username</Label>
              <Input 
              value={this.state.username}
          onChangeText={username => this.setState({ username })}
          placeholder={'Username'}
          />
            </Item>
            <Item floatingLabel last>
              <Label >Password</Label>
              <Input 
              value={this.state.password}
          onChangeText={password => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          />
            </Item>
          </Form>
          <Left>
            <Button onPress={() => this.props.navigation.navigate("Details")}>
              <Text>Login</Text>
            </Button>
            <Text >Forgot Password?</Text>
          </Left>
          <Right>
            <Button hasText transparent>
              <Text>Sign Up Here</Text>
            </Button>
          </Right>
      </Container>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
        <Text>Details Screen</Text>
    );
  }
}

class RegisterationScreen extends React.Component {
  render() {
    return (

        <Text>sign up time</Text>
    );
  }
}

const LoginRouter = createStackNavigator(
  {
    Home: { screen: Login },
    Details: { screen: DetailsScreen },       
  }
)

export default createAppContainer(LoginRouter);

import React，{Component}来自'React'；
从“原生基”导入{容器、标题、左、体、右、按钮、标题、文本、表单、项、输入、标签}；
从“react navigation”导入{StackNavigator}；
从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation”导入{DrawerNavigator}；
从“react navigation”导入{createAppContainer}；
导出类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
};
}
render（）{
返回(
Instaride
this.setState（{username:text}}>username
this.setState（{username}）}
占位符={'Username'}
/>
密码
this.setState（{password}）}
占位符={'Password'}
secureTextEntry={true}
/>
this.props.navigation.navigate（“详细信息”）}>
登录
忘记密码了？
在这里注册
);
}
}
类DetailsScreen扩展了React.Component{
render（）{
返回(
详细信息屏幕
);
}
}
类注册表屏幕扩展了React.Component{
render（）{
返回(
注册时间
);
}
}
const LoginRouter=createStackNavigator(
{
主页：{屏幕：登录}，
详细信息：{screen:DetailsScreen}，
}
)
导出默认createAppContainer（LoginRouter）；

但它给出了一个错误。我怎样才能改变它？为什么该方法在注册页面上有效，但在我的登录页面上无效

这来自App.tsx文件：

onst App: React.FC<AppProps> = () => {
  // Disable mapbox telemetry due to privacy policy
  useEffect(() => {
    MapboxGL.setTelemetryEnabled(false);
  });

  return (
    <NavigationNativeContainer>
      <NavigationStack.Navigator initialRouteName="Home">
        <NavigationStack.Screen
          name="Home"
          component={HomeScreen}
          options={{ headerShown: false }}
        />
        <NavigationStack.Screen
          name="Registration"
          component={RegistrationScreen}
          options={{ headerShown: false }}
        />
        {/* <NavigationStack.Screen
          name="Login"
          component={LoginScreen}
          options={{ headerShown: false }}
        /> */}
        <NavigationStack.Screen name="Details" component={DetailsScreen} />
      </NavigationStack.Navigator>
    </NavigationNativeContainer>
  );
};

onst应用程序：React.FC=（）=>{
//由于隐私策略，禁用mapbox遥测
useffect（（）=>{
MapboxGL.SettleMetryEnabled（false）；
});
返回(
{/*  */}
);
};

---

我发现一个错误，当我取消对该部分的注释时，找不到“Login”。

您能发布注册页面代码吗？您遇到了什么错误？@Nobady我添加了另一个部分，我认为这可能更有用。@CharlesMangwa看到更新的qs PLSY您似乎混合了React Navigation 5和React Navigation 4 API。v5文档v4文档：