React Native实现页面导航与传参

本示例演示如何使用React Native进行页面导航，并传递参数。通过React Navigation库实现导航，展示两个页面之间的跳转和参数传递。

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <Button
      title="跳转到详情页"
      onPress={() => {
        // 导航到Details页面，并传递参数
        navigation.navigate('Details', { itemId: 123, otherParam: 'Hello Details' });
      }}
    />
  );
};

const DetailsScreen = ({ route }) => {
  // 从导航参数中获取传递的值
  const { itemId, otherParam } = route.params;

  return (
    <View>
      <Text>详情页</Text>
      <Text>Item ID: {itemId}</Text>
      <Text>其他参数: {otherParam}</Text>
    </View>
  );
};

const 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;

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com