React Navigation (Native) navigation.navigate 不工作并抛出未定义的错误

Question

我应该带我回家的自定义按钮没有给我一个“未定义的错误”。 我很确定这是因为 Stack Navigator 的东西在主文件中，但我不知道如何让这个代码文件访问它，我的谷歌努力和文档都没有成功。 对这个简单问题的任何帮助将不胜感激。

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import player from './Player';
import App from './App';
import usePotion from './UsePotion';
import { useState } from 'react';
import { useEffect } from 'react';

    

function BattleScreen({ navigation }) {
    
    const [fontsLoaded, error] = useFonts({
        'Valorax': require('./Fonts/Valorax.otf'),
      });
    
      if (!fontsLoaded) {
        return <Text>Loading...</Text>;
      }


    return (
      <View style={styles.container}>
        <Text style={styles.text}>{player.potions}</Text>
        <View style={styles.topHalf}>
        </View>
        <View style={styles.bottomHalf}>
          <View style={styles.buttonRow}>
            <CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
            <CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
          </View>
          <View style={styles.buttonRow}>
            <CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
            <CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
            <CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
          </View>
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#000000',
    },
    topHalf: {
      flex: 1,
      color: 'white',
    },
    bottomHalf: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap'
    },
    buttonRow: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-evenly',
      flexWrap: 'wrap'
    },
    text: {
        fontSize: 90,
        color: 'white',
        fontFamily: "Valorax",
    }
  });


export default BattleScreen;
**strong text**

Answer 1

尝试使用useNavigation挂钩 ( https://reactnavigation.org/docs/use-navigation/ )：

import { useNavigation } from '@react-navigation/native';

function BattleScreen() {
    const [fontsLoaded, error] = useFonts({
        'Valorax': require('./Fonts/Valorax.otf'),
      });
      const navigation = useNavigation()
    
      if (!fontsLoaded) {
        return <Text>Loading...</Text>;
      }


    return (
      <View style={styles.container}>
        <Text style={styles.text}>{player.potions}</Text>
        <View style={styles.topHalf}>
        </View>
        <View style={styles.bottomHalf}>
          <View style={styles.buttonRow}>
            <CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
            <CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
          </View>
          <View style={styles.buttonRow}>
            <CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
            <CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
            <CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
          </View>
        </View>
      </View>
    );
  }