React native Navigation传值跳转小白教程

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

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

npm install @react-navigation/native

2. 在源组件中，使用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} />;
}

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

import { Text } from 'react-native';
 
function TargetComponent({ route }) {
  return <Text>{route.params.value}</Text>;
}

4. 在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访问这些参数。