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>
);
});
这是我的登录页面的架构:
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);
但它给出了一个错误。我怎样才能改变它?为什么该方法在注册页面上有效,但在我的登录页面上无效?
这是来自 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>
);
};
当我取消注释该部分时,我收到一个错误,即找不到“登录”。
解决方案
推荐阅读
- python - Python 和 SQlite 删除具有多个参数的行
- java - VM 初始化期间发生错误:java.lang.NoClassDefFoundError: java.lang.Object
- python - 如何将新列添加到权限表
- regex - 将 Coldfusion 变量的内容解析为单独的变量
- php - 在 PHP 中重定向视频流
- python - 在 tkinter 中打开浏览器而不使用 tkhtml
- python - 函数不会遵循其内部的格式
- visual-studio-code - 如何在 VSCode 中使用“输出”?
- node.js - 使用角度和节点上传图像的问题
- c - union 对变量有什么帮助?