【iOS开发】react Native 路由嵌套传参与框架原理（完）20240423

在React Native开发中，我们通常使用react-navigation库来处理应用内的路由和导航。下面是一个简单的例子，展示了如何使用react-navigation中的createStackNavigator和createAppContainer来创建嵌套的导航器，并且如何传递参数。

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
 
// 子页面，显示来自父页面的参数
const ChildScreen = ({ navigation, route }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Child Screen</Text>
    <Text>Parameter from parent: {route.params.myParam}</Text>
    <Button
      title="Go back"
      onPress={() => navigation.goBack()}
    />
  </View>
);
 
// 父页面，跳转到子页面，并传递参数
const ParentScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Parent Screen</Text>
    <Button
      title="Go to Child"
      onPress={() => navigation.navigate('Child', { myParam: 'Hello from parent' })}
    />
  </View>
);
 
// 创建导航器
const AppNavigator = createStackNavigator({
  Parent: {
    screen: ParentScreen,
  },
  Child: {
    screen: ChildScreen,
  },
});
 
// 应用容器
const AppContainer = createAppContainer(AppNavigator);
 
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

在这个例子中，我们定义了两个页面，ParentScreen和ChildScreen，以及它们之间的路由。在ParentScreen中，我们使用navigation.navigate方法跳转到ChildScreen，并通过route参数传递了一个名为myParam的字符串。在ChildScreen中，我们通过route.params.myParam来获取并显示这个参数。这个例子展示了如何在React Native应用中使用react-navigation库进行路由嵌套和参数传递。