React Native：使用功能通过React Navigation导航屏幕

Question

我以为这很简单，但是我绝对迷路了。我正在使用React Navigation来切换屏幕，我只想制作一个名为ScreenChange（）的函数，该函数需要一个字符串并在主App.js中切换屏幕。但是，我不知道如何获取该函数以访问navigation（）函数。有任何想法吗？我应该以其他方式实施导航吗？

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

import EStyleSheet from 'react-native-extended-stylesheet';
import StartScreen from './screens/StartScreen';
import Workout from './screens/Workout';

import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';



  const Stack = createStackNavigator();

  export function MainStackNavigator() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Home'>
          <Stack.Screen
            name = "Home"
            component={StartScreen}
             />

          <Stack.Screen
          name="Workout"
          component={Workout}
          />

        </Stack.Navigator>
      </NavigationContainer>
    )
  };



  export function ScreenChange(screen) {
    // ????
  };


 export default class App extends Component {
  constructor(props) {
    super(props);
    };





     render() {
      return (
        <View style = {styles.screen}>
           <MainStackNavigator />
        </View>
      );

     }





};




const styles = EStyleSheet.create({
  screen : {
    flex: 1,
  }
});

Answer 1

您不需要功能名称ScreenChange即可浏览屏幕。考虑到此文档here，当您定义Stack.Screen时，如

 <Stack.Screen
      name="Workout"
      component={Workout}
      />

反应导航将导航道具传递到此屏幕因此您只需要从道具中拿走它们，例如]

 const Workout = ({
          navigation, //this is navigation props you want 
 }) => {

    ..

    return <View>... </View> //some UI
 }