Expo SDK27升级后React Native Router Flux抽屉子场景props无法获取问题

Hey there, let's break down the issue you're facing after upgrading your Expo and React Native Router Flux (RNRF) stack. It sounds like your previously working prop flow from the Drawer to nested child scenes stopped working once you moved to SDK 27 and RNRF v4.0.0-beta.31—let's figure out why and how to fix it.

What's Likely Happening #

First, it's almost certainly not a feature removal, but rather a change in how props are handled in the newer RNRF beta versions. Since RNRF now relies on react-navigation v1.5.11 (which has its own prop-passing updates), the implicit prop forwarding from the Drawer to nested Scenes that worked in older betas was adjusted to align with react-navigation's standard patterns.

Fixes to Try #

1. Use screenProps for Global Prop Passing #

React Navigation (and by extension RNRF) provides screenProps as a dedicated way to pass props down to all child scenes under a navigator. This is the most straightforward solution for your case:

Update your Drawer component to include the screenProps prop with your custom data:

<Drawer 
  hideNavBar 
  key="activitiesDrawer" 
  contentComponent={ActivitiesDrawer} 
  drawerWidth={300}
  screenProps={{ yourCustomProp: 'yourValue', anotherProp: 123 }} // Add your props here
>
  <Scene key="activitiesMain" headerTintColor="#fff">
    <Scene 
      key="activities" 
      component={Activities} 
      hideNavBar={true} 
      panHandlers={null} 
      initial 
      title="Activities" 
      navigationBarStyle={styles.navBarStyle} 
    />
  </Scene>
</Drawer>

Then, in your Activities component, access the props via the screenProps object:

const { yourCustomProp, anotherProp } = this.props.screenProps;

2. Pass Props Via Navigation Params (If Triggered From Drawer) #

If you're trying to pass props specifically when navigating from the ActivitiesDrawer to Activities, you can pass them directly using RNRF's Actions API:

In your ActivitiesDrawer component (when triggering the navigation):

// Example button press handler
const goToActivities = () => {
  Actions.activities({ yourCustomProp: 'yourValue' });
};

Then in the Activities component, retrieve the prop from navigation.state.params:

const { yourCustomProp } = this.props.navigation.state.params;

3. Check for Known Beta Issues #

Since you're using a beta version of RNRF, it's possible this is a temporary bug. Head to RNRF's GitHub issues section and search for terms like "drawer props child scene" or "screenProps not working"—you might find existing reports or workarounds from other developers. If you don't see a matching issue, consider submitting one with your exact version details and scene code to help the team fix it.

4. Verify With a Version Rollback #

To confirm this is a version-specific change, you could temporarily roll back RNRF to v4.0.0-beta.22 (your previous working version) while keeping Expo SDK 27 and react-navigation v1.5.11. If props start working again, that confirms the behavior changed in the newer beta, and you can either stick with the older version (if possible) or use the workarounds above.

Final Notes #

The key takeaway is that RNRF's prop-passing logic evolved to match react-navigation's conventions in the newer beta releases. Using screenProps is the recommended approach for passing props to all child scenes under a navigator, and it should resolve your issue smoothly.

内容的提问来源于stack exchange，提问作者William Brown