如何使用react native expo进行导航?

Question

我知道这是一个基本的问题，但是当我在网上搜索时，答案总是一个带有多个功能的文件，例如这里的链接。我想要的是每个文件和多个文件使用一个函数(我认为它会像HTML一样简单，但当我看它似乎很复杂!我只想在两个页面之间导航!)

Answer 1

您提供的链接我们只需要做一些更改，我们需要创建一个新文件，并将该函数粘贴到新文件中，就像下面

homesscreen .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;