react-native - 如何访问导航容器之外的导航

Question

在这里我正在尝试向我的 react-native 项目添加导航，按钮注册应该导航到成功页面组件，但唯一的问题是按钮注册存在于导航容器之外我正在尝试访问导航容器之外的“导航”这是导航容器：

import * as React from 'react';
import { Text, View, StyleSheet,Image,TouchableHighlight,TextInput,
  Button, } from 'react-native';
import Constants from 'expo-constants';
import logo from './assets/logo4.png'
import logo2 from './assets/CFA_approved_prep_provider_RGB.png'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { enableScreens } from 'react-native-screens';
import { Component } from 'react';
import * as Font from 'expo-font';
import  { useRef } from "react";
import logo3 from './assets/logo3.png'



 
enableScreens();
const Stack = createStackNavigator();

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm


import { Card } from 'react-native-paper';



    

export default function App() {
  const navigationRef = useRef(null)
  
  return (
    
    <View style={{flex: 1,
      justifyContent: 'center',
      
      backgroundColor:'white',}}>
     
     
      
  
  
        <NavigationContainer ref={navigationRef}>
          
  <Stack.Navigator initialRouteName="SplashScreen">
  <Stack.Screen name="SplashScreen" component={SplashScreen} /> 
  <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={Details} />
        <Stack.Screen name="SuccessPage" component={SuccessPage} />

        </Stack.Navigator>
        
</NavigationContainer>



  
        </View>

在这里，我试图这样访问它：

<View style={[{ width: "90%", margin: 10 }]}>
   <Button
      onPress={() => navigationRef.current.navigate("SuccessPage")}
      title="Register"
      
    />
</View> 

那是错误：

截图在这里

知道还能做什么吗？

标签： react-nativereact-native-navigation