React Native：点击时如何将数据从页面传递到自定义抽屉组件并展示

现有代码的问题 #

你的代码存在两个关键问题：

1. CustomDrawer是作为drawerContent自定义的抽屉内容，并非注册的Drawer.Screen，所以navigation.openDrawer({ screen: 'CustomDrawer', params: ... })写法无效——openDrawer不需要指定目标screen，抽屉是依附于当前活跃页面的。
2. CustomDrawer无法通过route.params获取参数，因为它不是独立路由页面，没有专属的route对象。

下面提供两种可行的解决方案：

方案一：父组件状态传递（简单场景推荐） #

通过在MyDrawer中维护状态，把数据和更新方法分别传给DividendAndPrize和CustomDrawer：

1. 修改App.js的MyDrawer组件

import React, { useState } from 'react';
import { Dimensions } from 'react-native';
import { Drawer } from '@react-navigation/drawer';
import DividendAndPrize from './DividendAndPrize';
import CustomDrawer from './CustomDrawer';

function MyDrawer() {
  // 存储要传递给抽屉的数据
  const [drawerData, setDrawerData] = useState(null);

  return (
    <Drawer.Navigator 
      drawerContent={(props) => <CustomDrawer {...props} drawerData={drawerData} />} 
      screenOptions={{ 
        drawerPosition: 'right', 
        drawerStyle: {width: Dimensions.get('window').width / 1.25} 
      }}
    >
      <Drawer.Screen 
        name="DividendAndPrize" 
        component={DividendAndPrize} 
        options={{ title: '', headerShown: false, statusBarColor: '#021C55' }}
        // 将更新数据的方法传给DividendAndPrize
        initialParams={{ setDrawerData }}
      />
    </Drawer.Navigator>
  );
}

export default MyDrawer;

2. 修改DividendAndPrize.js

调用父组件传来的方法设置数据，再打开抽屉：

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

const DividendAndPrize = ({ navigation, route }) => {
  const customDrawerData = {
    data: 'Value for Rule 1',
  };

  const openDrawer = () => {
    // 先把数据传给父组件的状态
    route.params.setDrawerData(customDrawerData);
    // 打开抽屉
    navigation.openDrawer();
  };

  return (
    <View>
      <Text>Rule 1</Text>
      <Text>Rule 2</Text>
      <Text>Rule 3</Text>
      <Text>Rule 4</Text>
      <Text>Rule 5</Text>
      <Text>Rule 6</Text>

      <Text 
        style={{ fontSize: 30, borderWidth: 1, borderColor: 'red'}} 
        onPress={openDrawer}
      >
        Open Drawer with Data
      </Text>
    </View>
  );
};

export default DividendAndPrize;

const styles = StyleSheet.create({});

3. 修改CustomDrawer.js

直接使用传入的drawerData并展示：

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

const CustomDrawer = ({ drawerData }) => {
  // 处理数据未初始化的情况
  if (!drawerData) {
    return <View><Text>No data received</Text></View>;
  }

  return (
    <View>
      <Text>CustomDrawer</Text>
      {/* 展示接收的数据 */}
      <Text>Received Data: {drawerData.data}</Text>
    </View>
  );
};

export default CustomDrawer;

const styles = StyleSheet.create({});

方案二：路由参数传递（无需额外状态） #

利用当前活跃页面的路由参数传递数据，抽屉通过父导航获取这些参数：

1. 修改DividendAndPrize.js的openDrawer方法

const openDrawer = () => {
  // 将数据设置到当前页面的路由参数中
  navigation.setParams({ customDrawerData });
  navigation.openDrawer();
};

2. 修改CustomDrawer.js

通过父导航获取当前页面的参数：

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const CustomDrawer = () => {
  const navigation = useNavigation();
  // 获取DrawerNavigator的当前路由参数
  const parentRoute = navigation.getParent()?.getCurrentRoute();
  const customDrawerData = parentRoute?.params?.customDrawerData;

  return (
    <View>
      <Text>CustomDrawer</Text>
      {customDrawerData ? (
        <Text>Received Data: {customDrawerData.data}</Text>
      ) : (
        <Text>No data received</Text>
      )}
    </View>
  );
};

export default CustomDrawer;

const styles = StyleSheet.create({});

方案选择 #

• 方案一逻辑清晰，状态管理集中，适合大多数简单场景；
• 方案二不需要额外状态，实现快速，适合临时或小型项目。

内容的提问来源于stack exchange，提问作者Bhaskar Kherkatary