Expo 框架如何实现页面跳转

Expo 框架可以使用 React Navigation 库实现页面跳转。

1. 首先，在终端中使用以下命令安装 React Navigation 库：

npm install @react-navigation/native

2. 安装所需的依赖：

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. 接着，在 App.js 文件中引入所需的组件：

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

4. 在 App.js 文件中创建 StackNavigator：

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

5. 创建两个屏幕组件 HomeScreen 和 DetailsScreen：

function 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>
  );
}

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

6. 在 HomeScreen 组件中添加一个按钮，点击后跳转到 DetailsScreen 组件，同时在 DetailsScreen 组件中添加一个按钮，点击后返回 HomeScreen 组件。

这样就可以使用 Expo 和 React Navigation 实现页面的跳转了。