react native 跳转传参
React Native是一种基于React的移动应用开发框架，它可以让开发者使用JavaScript和React的语法来构建原生应用。在React Native中，跳转传参是非常常见的操作，本文将介绍如何在React Native中实现跳转传参。
一、使用react-navigation实现跳转传参
react-navigation是React Native中常用的导航库，它提供了一系列的API来实现页面之间的跳转和传参。下面是一个简单的例子：
1. 安装react-navigation
```
npm install @react-navigation/native
```
2. 创建两个页面
```
import React from 'react';
import { View, Text, Button } from 'react-native';
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', { itemId: 86, otherParam: 'hello' })}
      />
    </View>
  );
}
function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go again"
        onPress={() => navigation.push('Details', { itemId: Math.floor(Math.random() * 100) })}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => Back()} />
    </View>
  );
}
```
3. 创建StackNavigator
```
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
react开发框架```
在上面的例子中，我们创建了两个页面HomeScreen和DetailsScreen，然后使用react-navigation的API来实现了页面之间的跳转和传参。在HomeScreen中，我们使用navigation.navigate来跳转到DetailsScreen，并传递了两个参数itemId和otherParam。在DetailsScreen中，我们使用route.params来获取传递过来的参数，并使用navigation.push、navigation.navigate和Back来实现页面之间的跳转。
二、使用react-native-router-flux实现跳转传参
react-native-router-flux是另一个常用的导航库，它提供了一系列的API来实现页面之间的跳转和传参。下面是一个简单的例子：
1. 安装react-native-router-flux
```
npm install react-native-router-flux
```
2. 创建两个页面
```
import React from 'react';
import { View, Text, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。