React Native:如何将屏幕作为子组件进行更改/导航？

npm install @react-navigation/native

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

const App = () => {
  return (
    <NavigationContainer>
      {/* Your app screens */}
    </NavigationContainer>
  );
}

export default App;

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

const HomeScreen = () => {
  return (
    <View>
      <Text>Welcome to the Home Screen!</Text>
    </View>
  );
}

export default HomeScreen;

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

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* Other screens */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

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

const HomeScreen = () => {
  const navigation = useNavigation();

  const navigateToOtherScreen = () => {
    navigation.navigate('OtherScreen');
  }

  return (
    <View>
      <Text>Welcome to the Home Screen!</Text>
      <Button title="Go to Other Screen" onPress={navigateToOtherScreen} />
    </View>
  );
}

export default HomeScreen;