React native Navigation传值跳转小白教程

作者：System 时间：2024年08月16日分类：所有,react native 字数：1273

这篇文章距离上次修改已过261天，其中的内容可能已经有所变动。

在React Native中使用Navigation传值通常涉及到两个组件：源组件和目标组件。以下是如何进行值传递的简单示例：

安装react-navigation库（如果尚未安装）：

npm install @react-navigation/native

在源组件中，使用navigation.navigate方法传递参数：

import { Button } from 'react-native';

function SourceComponent({ navigation }) {
  const onPress = () => {
    navigation.navigate('TargetScreen', { value: 'Hello, World!' });
  };

  return <Button title="Go to Target" onPress={onPress} />;
}

在目标组件中，使用route.params获取传递的参数：

import { Text } from 'react-native';

function TargetComponent({ route }) {
  return <Text>{route.params.value}</Text>;
}

在Navigation容器中注册屏幕组件：

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="SourceScreen" component={SourceComponent} />
        <Stack.Screen name="TargetScreen" component={TargetComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

以上代码展示了如何在React Native应用中使用react-navigation库进行屏幕间的参数传递。在源组件中，我们通过navigation.navigate方法将参数作为第二个参数传递，在目标组件中，我们通过route.params访问这些参数。

React native Navigation传值跳转小白教程

评论已关闭

推荐阅读