Javascript 不知道如何使用导航。在本机应用程序中导航
我创建了一个基本的SplashScreen.tsx,上面只有一些文本。然后,我创建了这个LoginCreateAccountScreen.tsx,它有一个Login按钮和createaccount按钮。我想让我的应用程序在自动导航到LoginCreateAccountScreen.tsx之前显示SplashScreen.tsx几秒钟。此外,按下按钮会将用户重定向到其他屏幕,但这也不起作用。我不知道如何做到这一点,并且在弄清楚如何做到这一点上遇到了很多困难 我用它以及各种StackOverflow帖子到达了我现在的位置。但老实说,我很迷茫,因为前端导航有太多的事情要做 我不明白AppNavigator.js和App.js(我的应用程序的入口点)如何协同工作,让我能够从当前屏幕导航到另一个屏幕。现在,我无法使用任何导航。我必须通过在App.js中设置来手动更改屏幕 My App.js,用于渲染SplashScreen。但不会转换到LoginCreateAccount屏幕Javascript 不知道如何使用导航。在本机应用程序中导航,javascript,ios,reactjs,react-native,navigation,Javascript,Ios,Reactjs,React Native,Navigation,我创建了一个基本的SplashScreen.tsx,上面只有一些文本。然后,我创建了这个LoginCreateAccountScreen.tsx,它有一个Login按钮和createaccount按钮。我想让我的应用程序在自动导航到LoginCreateAccountScreen.tsx之前显示SplashScreen.tsx几秒钟。此外,按下按钮会将用户重定向到其他屏幕,但这也不起作用。我不知道如何做到这一点,并且在弄清楚如何做到这一点上遇到了很多困难 我用它以及各种StackOverflow
import React, { Component } from 'react';
import EmojiDict from './screens/EmojiDict';
import SplashScreen from './screens/SplashScreen';
import LoginCreateAccountScreen from './screens/LoginCreateAccountScreen'
export default class App extends Component {
render() {
return <SplashScreen />;
}
}
My SplashScreen.tsx:
当我按下“登录”或“创建帐户”按钮时,出现以下错误,这两个按钮都是相同的:
错误消息说,您的电脑中没有导航道具 创建帐户登录组件 您需要将CreateAccountOrLogin添加到createStackNavigator,然后createStackNavigator将导航道具传递给CreateAccountOrLogin
const MainNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
LoginScreen: {screen: LoginScreen},
CreateAccountScreen: {screen: CreateAccountScreen},
+ CreateAccountOrLogin
});
只需在CreateAccountOrLogin中编写以下代码,就可以知道props.navigation是否存在
render() {
console.log(this.props)
return(
这就是react导航有用的地方。我会指导你的。我相信您已经按照文档安装了react导航。否则一定要先下载。看看这个。希望能有帮助 让我们首先从堆栈导航器开始,所以您希望在开始时显示splashscreen,然后向右导航到loginscreen。因此AppNavigator应该如下所示:
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation";
import MainTabNavigator from "./MainTabNavigator";
import { Platform } from "react-native";
// Importing my screens here.
import LoginCreateAccountScreen from "../screens/LoginCreateAccountScreen";
import CreateAccountScreen from "../screens/CreateAccountScreen";
import LoginScreen from "../screens/Login/LoginScreen";
import SplashScreen from "../screens/SplashScreen";
const MainNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
LoginScreen: {screen: LoginScreen},
CreateAccountScreen: {screen: CreateAccountScreen},
},
{ initialRouteName: 'SplashScreen'} // have added this coz you want splashscreen to be first rendered
);
const App = createAppContainer(MainNavigator);
export default App;
现在你的应用导航器已经制作好了,现在让我们切换到初始屏幕,在那里你想让它呈现3秒钟,然后导航到LoginScreen。所以我们将重定向到componentDidMount中的登录屏幕,让我们构建一个
溅屏:
import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
class SplashScreen extends Component {
componentDidMount(){
this.setTimeout(() => {this.props.navigation.navigate("LoginScreen")} , 3000); // im redirecting to login screen after 3 secs of showing splash screen.
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
The Good App
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 45,
textAlign: 'center',
fontWeight: 'bold'
}
});
export default SplashScreen;
那么只有this.props.navigation.navigateScreenName可以工作
希望能有帮助。不要怀疑嗨,这对我来说完全有道理。但是,我的应用程序的入口点是app.js。我假设我必须将AppNavigator导入App.js并呈现它?你可以在App.js中编写AppNavigator代码,如果你在App.js中没有任何其他特定内容,只需将代码粘贴到App.js中即可
render() {
console.log(this.props)
return(
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation";
import MainTabNavigator from "./MainTabNavigator";
import { Platform } from "react-native";
// Importing my screens here.
import LoginCreateAccountScreen from "../screens/LoginCreateAccountScreen";
import CreateAccountScreen from "../screens/CreateAccountScreen";
import LoginScreen from "../screens/Login/LoginScreen";
import SplashScreen from "../screens/SplashScreen";
const MainNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
LoginScreen: {screen: LoginScreen},
CreateAccountScreen: {screen: CreateAccountScreen},
},
{ initialRouteName: 'SplashScreen'} // have added this coz you want splashscreen to be first rendered
);
const App = createAppContainer(MainNavigator);
export default App;
import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
class SplashScreen extends Component {
componentDidMount(){
this.setTimeout(() => {this.props.navigation.navigate("LoginScreen")} , 3000); // im redirecting to login screen after 3 secs of showing splash screen.
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
The Good App
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 45,
textAlign: 'center',
fontWeight: 'bold'
}
});
export default SplashScreen;
import ScreenName from "../screens/ScreenName";
const MainNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
LoginScreen: {screen: LoginScreen},
CreateAccountScreen: {screen: CreateAccountScreen},
ScreenName:{screen:ScreenName}
},
{ initialRouteName: 'SplashScreen'} // have added this coz you want splashscreen to be first rendered
);