如何使用 React Native Expo 导航？

Question

我知道这是一个基本问题，但当我在网上搜索时，答案总是一个单一文件和多个函数 link here for exemple。我想要的是每个文件和多个文件使用一个函数（我认为它会像 HTML 中那样简单，但当我研究它时它看起来太复杂了！我只想在 2 页之间导航！）

Answer 1

您提供的link我们只需要做我们必须创建新文件并将该函数粘贴到新文件中的更改，如下所示

HomeScreen.js 文件看起来像这样

import * as React from 'react';
import { Button, View, Text } from 'react-native';
Const HomeScreen = ({ navigation }) => {
  return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent:   'center' }}>
       <Text>Home Screen</Text>
       <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
       />
      </View>
  );
 }
 export default HomeScreen;

DetailsScreen.js 文件看起来像这样

import * as React from 'react';
import { Button, View, Text } from 'react-native';
Const DetailsScreen = ({ navigation }) =>  {

return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>Details Screen</Text>
     <Button
      title="Go to Details... again"
      onPress={() => navigation.push('Details')}
      />
    </View>
   );
 }
export default DetailsScreen;

您的 app.js 文件如下所示。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from ‘../HomeScreen’;
import DetailsScreen from ‘../DetailsScreen’
const Stack = createNativeStackNavigator();
function App() {
  return (
      <NavigationContainer>
       <Stack.Navigator initialRouteName="Home">
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Details" component={DetailsScreen} />
       </Stack.Navigator>
      </NavigationContainer>
 );
}

export default App;

如何使用 React Native Expo 导航？

How to navigate with react native expo?

navigation

reactjs

react-native

react-navigation