如何在 React Native 中從一個屏幕導航到另一個屏幕？

Question

當我點擊注冊按鈕時，我想導航到注冊頁面，但它不起作用。 我已將屏幕和導航屏幕也導入到 app.js 文件中。 我收到 ReferenceError：找不到變量：導航。 我也無法插入背景圖片？ 下面是注冊頁面。

import React from 'react';
import { StyleSheet,ImageBackground,Text, View, TextInput, TouchableOpacity } from   'react-native';
let bgImage='../../resources/images/bg2.png'
export default class LoginScreen extends React.Component {
      state={
        email:"",
        password:"",
      }
      render(){
        return (
        <View style={styles.container}>
            <Text style={styles.logo}>Trollo</Text>
           <View style={styles.box}>
            <View style={styles.inputView} >
              <TextInput
                style={styles.inputText}
                placeholder="Email"
                placeholderTextColor="#808080"
                onChangeText={text => this.setState({email:text})}/>
            </View>
            <View style={styles.inputView} >
              <TextInput
                secureTextEntry
                style={styles.inputText}
                placeholder="Password"
                placeholderTextColor="#808080"
                onChangeText={text => this.setState({password:text})}/>
           </View>
            <TouchableOpacity style={styles.loginBtn}>
               <Text style={styles.loginText}>SIGN IN</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.forgot}>Forgot Password?</Text>
            </TouchableOpacity>
           </View>
            <Text style={styles.text1}>New Here?</Text>
            <TouchableOpacity style={styles.signupBtn} onPress = {(navigation) => navigation.navigate('Sign Up')}>
              <Text style={styles.loginText}>SIGN UP</Text>
            </TouchableOpacity>
            <Text style={styles.logoText}>Trollo</Text>
        </View>
        );
      }
    }


});

Answer 1

onPress處理程序不會以navigation作為第一個參數來調用。 那是undefined的。 navigation是堆棧導航器設置提供的 class 組件的道具。

代替

onPress = {(navigation) => navigation.navigate('Sign Up')}

利用

onPress = {() => this.props.navigation.navigate('Sign Up')}