不知道如何在 React Native 应用程序中使用 navigation.navigate

Question

我创建了一个基本的 SplashScreen.tsx，上面只有一些文字。然后，我创建了这个 LoginCreateAccountScreen.tsx，它有一个登录按钮和创建帐户按钮。我希望我的应用在自动导航到 LoginCreateAccountScreen.tsx 之前显示 SplashScreen.tsx 几秒钟。此外，按下按钮应该将用户重定向到其他屏幕，但这也不起作用。我不知道该怎么做，并且在弄清楚如何完成它时遇到了很多困难。

我使用这个 React Native Navigation Article as well as This Tutorial 以及各种 Whosebug 帖子到达了我现在所在的位置。但老实说，我很迷茫，因为在前端导航方面发生了太多事情。

我不明白 AppNavigator.js 和 App.js（我的应用程序的入口点）如何协同工作，让我能够从当前屏幕导航到另一个屏幕。现在，我无法使用任何类型的导航。我必须通过在 App.js.

中设置来手动更改屏幕

My App.js，它呈现启动画面。但不会转换到 LoginCreateAccountScreen。

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 />;
    }
}

我的AppNavigator.js:

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},
});

const App = createAppContainer(MainNavigator);

export default App;

我的SplashScreen.tsx:

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

class SplashScreen extends Component {
    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;

我的LoginCreateAccountScreen.tsx:

import React, { Component } from 'react';
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
  TouchableOpacity
} from 'react-native';
import Constants from 'expo-constants';

function Separator() {
  return <View style={styles.separator} />;
}

class CreateAccountOrLogin extends Component {
    handleLogInButton = () => {
        Alert.alert('Log In pressed')
        this.props.navigation.navigate("LoginScreen");
    };

    handleCreateAccountButton = () => {
        Alert.alert('Create Account pressed')
        this.props.navigation.navigate("CreateAccountScreen");
    };

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                style={styles.customButtonBackground}
                onPress={() => this.handleLogInButton()}>
                    <Text style={styles.customButtonText}>Login</Text>
                </TouchableOpacity>
                <TouchableOpacity
                style={styles.customButtonBackground}
                onPress={() => this.handleCreateAccountButton()}>
                    <Text style={styles.customButtonText}>Create Account</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    /* Here, style the text of your button */
    customButtonText: {
        fontSize: 35,
        fontWeight: '400',
        color: "#fff",
        textAlign: 'center'
    },
    /* Here, style the background of your button */
    customButtonBackground: {
        backgroundColor: "#007aff",
        paddingHorizontal: 30,
        paddingVertical: 5,
        borderRadius: 30,
        width: "70%",
        aspectRatio: 5 / 1,
    }
});

export default CreateAccountOrLogin;

当我按下“登录”或“创建帐户”按钮时出现以下错误，这两者都是一样的：

Answer 1

错误消息说，"There is no navigation props in your　Create Account Login component."

您需要将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(

Answer 2

这就是 React 导航的用武之地。我会指导你。我相信您已经按照文档安装了 React Navigation。否则请务必先下载。检查此 react-navigatoin-doc 。希望对你有帮助。

所以让我们先从堆栈导航器开始，所以您想在开始时显示闪屏，然后导航到右侧的登录屏幕。所以 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 秒，然后将其导航到登录屏幕。所以我们将重定向到 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.navigate("ScreenName") 将用户从登录重定向到任何屏幕，只需确保在执行上述代码之前在 AppNavigator 中添加您的屏幕，就像第一个

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
    );

那么只有 this.props.navigation.navigate("ScreenName") 这行得通。

希望对您有所帮助。有疑问请随意

不知道如何在 React Native 应用程序中使用 navigation.navigate

Don't know how to use navigation.navigate in React Native app

javascript

navigation

ios

reactjs

react-native