如何向React Native BottomNavigation场景传递Props？

我有一个带底部导航的用户资料管理页面，实现方式参考react-native-paper的BottomNavigation官方示例。

原始代码 #

import React, { useEffect } from 'react';
import { BottomNavigation } from 'react-native-paper';

// Components
import CodeScanner from '../../../screens/vendors/CodeScannerScreen';
import Home from '../../../screens/home/HomeScreen';
import Vendors from '../vendors/VendorsStack';
   
// Routes
const homeRoute = () => <Home />;
const socialRoute = () => <Social />;
const friendsRoute = () => <Friends />;

const HomeTabs = (props) => {
   
   const [index, setIndex] = React.useState(0);
   const [user, setUser] = React.useState()

   useEffect(() => {
       // 此处从远程服务器加载用户数据并赋值
       setUser(remoteUserInfo)
   }, [])

   const [routes] = React.useState([
      { key: 'home', title: 'Home', icon: 'home' },
      { key: 'social', title: 'Social', icon: 'social' },
      { key: 'friends', title: 'Friends', icon: 'friends' }
   ]);
   
   const renderScene = BottomNavigation.SceneMap({
      home: homeRoute,
      social: socialRoute,
      friends: friendsRoute
   });

   return (
      <BottomNavigation
         navigationState={{ index, routes }}
         onIndexChange={setIndex}
         renderScene={renderScene}
         labeled={false} />
   );
}

export default HomeTabs;

遇到的问题 #

我在HomeTabs组件中获取了用户信息，需要将其通过Props传递给各个场景组件，但尝试以下方法无效：

const homeRoute = ({user}) => <Home user={user} />;

const renderScene = BottomNavigation.SceneMap({
          home: <homeRoute user={user}/>,
          social: <socialRoute user={user}/>,
          friends: <friendsRoute user={user}/>
       });

希望找到可行的解决方法，且避免使用Redux或Context这类复杂方案。

解决方案 #

问题出在BottomNavigation.SceneMap的使用方式上：它接受的是组件类型而非组件实例，且是静态创建的，无法动态传递后续变化的props。我们可以直接自定义renderScene函数，替代SceneMap，这样就能灵活传递props。

修改后的完整代码 #

import React, { useEffect } from 'react';
import { BottomNavigation } from 'react-native-paper';

// Components
import CodeScanner from '../../../screens/vendors/CodeScannerScreen';
import Home from '../../../screens/home/HomeScreen';
import Social from '../path/to/Social'; // 确保正确导入组件
import Friends from '../path/to/Friends'; // 确保正确导入组件
import Vendors from '../vendors/VendorsStack';
   
const HomeTabs = (props) => {
   
   const [index, setIndex] = React.useState(0);
   const [user, setUser] = React.useState()

   useEffect(() => {
       // 此处从远程服务器加载用户数据并赋值
       setUser(remoteUserInfo)
   }, [])

   const [routes] = React.useState([
      { key: 'home', title: 'Home', icon: 'home' },
      { key: 'social', title: 'Social', icon: 'social' },
      { key: 'friends', title: 'Friends', icon: 'friends' }
   ]);
   
   // 自定义renderScene函数，直接传递user props
   const renderScene = ({ route }) => {
     switch (route.key) {
       case 'home':
         return <Home user={user} />;
       case 'social':
         return <Social user={user} />;
       case 'friends':
         return <Friends user={user} />;
       default:
         return null;
     }
   };

   return (
      <BottomNavigation
         navigationState={{ index, routes }}
         onIndexChange={setIndex}
         renderScene={renderScene}
         labeled={false} />
   );
}

export default HomeTabs;

说明 #

• 去掉了原来的homeRoute、socialRoute等中间函数，直接在renderScene中渲染对应组件并传递user props
• 当user状态更新时，renderScene会自动重新渲染对应的组件，确保子组件能拿到最新的用户数据
• 这种方式完全不需要Redux或Context，仅通过组件props传递数据，符合你的需求

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