代码之家  ›  专栏  ›  技术社区  ›  Vikram Mahishi

如何将道具传递给BottomTabNavigator中的函数

  •  1
  • Vikram Mahishi  · 技术社区  · 6 年前

        fetchProfile = () => {
            const {selectedPerson, dispatch, actions} = this.props
            let Id = selectedPerson.Id
            let personId = selectedPerson.placeId
            dispatch(actions.getPersonDetails(Id, personId))
        }
    
        export const Tabs = createBottomTabNavigator({
            Profile: { 
                screen: ProfileConnector,
                navigationOptions: {
                    tabBarLabel: 'Profile',
                    tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor} onPress={() => fetchProfile()}/>,
                },
                // navigationOptions: ({ navigation }) => ({
                //     tabBarOnPress: (tab, jumpToIndex) => {
                //       console.log('onPress:', tab.route);
                //       jumpToIndex(tab.index);
                //     },
                //     tabBarLabel: 'Profile',
                //     tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor}/>,
                //   }),
            },
            Inbox: { 
                screen: InboxConnector,
                navigationOptions: {
                    tabBarLabel: 'Inbox',
                    tabBarIcon: ({tintColor}) => <Icon name="inbox" size={px2dp(22)} color={tintColor}/>,
                },
            },
            Bling: {
                screen: BlingConnector,
                navigationOptions: {
                    tabBarLabel: 'Bling',
                    tabBarIcon: ({tintColor}) => <Icon name="hand" size={px2dp(22)} color={tintColor}/>,
                },
            },
            Calendar: {
                screen: CalendarConnector,
                navigationOptions: {
                    tabBarLabel: 'Calendar',
                    tabBarIcon: ({tintColor}) => <Icon name="calendar" size={px2dp(22)} color={tintColor}/>,
                },
            },
            Misc: {
                screen: Misc,
                navigationOptions: {
                    tabBarLabel: 'Misc',
                    tabBarIcon: ({tintColor}) => <Icon name="bar-graph" size={px2dp(22)} color={tintColor}/>,
                },
            },
        }, {
            initialRouteName: 'Inbox',
            tabBarPosition: 'bottom',
            swipeEnabled: true,
            scrollEnabled: true,
            tabBarOptions: {
                activeTintColor: 'teal',
                inactiveTintColor: '#424949',
                activeBackgroundColor: "white",
                inactiveTintColor: '#424949',
                labelStyle: { fontSize: 14 },
                style : { height : 50},
            }
        });
    

    任何帮助都是非常感谢的,我对这个失去了我的心。 我试过上面的注释掉的部分,它抛出 jumpToIndex is not a function 另一个选项没有redux存储值。

    请帮忙( 谢谢, 维克拉姆

    1 回复  |  直到 6 年前
        1
  •  0
  •   tuledev    6 年前

    “每次切换选项卡时,我都需要进行api调用以获取最新信息。”

    willFocus didFocus 反应导航然后获取api的事件

    react-navigation: Detect when screen is activated / appear / focus / blur

    推荐文章