更改页面值时 Nativebase 选项卡不更改内容

Question

我在从另一个屏幕导航到选项卡时遇到问题。当我在页面上单击选项卡时，内容切换正常，但是当我尝试在导航到该屏幕之前从另一个组件设置活动选项卡时，我在转到指定选项卡时遇到问题。

我试过通过导航将参数传递到 parent 屏幕，如下所示：this.props.navigation.navigate('Menu', {goToOrderDetails: true}) 然后在菜单屏幕中，我创建了一个 componentFocused 函数，每次页面处于焦点状态时，我正在检查 goToOrderDetails 参数是否为真，如果是，我正在手动设置用于设置活动选项卡的状态变量。但是，这不起作用，只是 returns 直接转到默认选项卡 (0)，然而，样式颜色指示器在正确的选项卡上，但内容是第一个选项卡的内容。

这就是我目前正在尝试的方式：这是菜单屏幕：

import React, {Component} from 'react';
import {observer} from "mobx-react";
import {ScrollView} from 'react-native';
import {Container, Tab, Tabs, ScrollableTab} from 'native-base';
import OrderHistory from './OrderHistory';
import Favorites from '../components/Favorites';
import Heading from '../components/Heading';
import store from '../store/store';
import i18n from 'i18n-js';

class Menu extends Component {
    constructor() {
        super();
        this.subs;
        this.state = {
            activeTab: 0, 
            initialPage: 0
        };
    }

     getTab() {
        if(this.props.navigation.state.params){
            if(this.props.navigation.state.params.page == 'orderhistory') {
                return 2;
            }if(this.props.page == 'favorites'){
                return 1;
            }else{
                return 0;
            }
        } else {
            if (this.props.navigation.getParam('orderHistory') || store.toOrderHistory == true) {
                return 2;
            } else if (this.props.navigation.getParam('favorites')) {
                return 1;
            }
            store.toOrderHistory.set(false);
        }
    }

    componentDidMount() {
        this._componentFocused();
        this._sub = this.props.navigation.addListener(
            'didFocus',
            this._componentFocused
        );
    }

    _componentFocused = () => {
        store.updateActiveTab(this.getTab());
    }

    updateTab(tab) {
        store.updateActiveTab(tab.i);
    }

    render() {
        return (
            <Container>
                <Heading title={'Menu'} />
                    <Tabs onChangeTab={(tab) => {this.updateTab.bind(this, tab)}} 
                          page={store.activeTab.get()} 
                          renderTabBar={()=> <ScrollableTab />}> 
                        <Tab heading={i18n.t('menu.all_tab')}>
                            <ScrollView>
                                {this.displayMenu()}
                            </ScrollView>
                        </Tab>
                        <Tab heading={i18n.t('menu.fav_tab')}>
                            <Favorites></Favorites>
                        </Tab>
                        <Tab heading={i18n.t('menu.recent_tab')}>
                            <OrderHistory></OrderHistory>
                        </Tab>
                    </Tabs>
            </Container>
        )
    };
}

export default observer(Menu);

我正在尝试将导航参数从订单详细信息屏幕发送到此屏幕，如下所示：this.props.navigation.navigate('Menu',{goToOrderDetails: true}) 当该参数为真时，我正在更新商店 activeTab 值，如下所示：store.updateActiveTab.set(2). 最奇怪的是，如果我 console.log 选项卡值，它是 2！哪一个是正确的，我需要它在上面！正如我之前提到的，标题的颜色也是活动颜色！只是内容和颜色下划线不在该选项卡上。是否有必要刷新整个选项卡组件，以便我可以从另一个屏幕更改活动选项卡？我不确定为什么会出现这种行为，需要一些帮助！

这是我从订单详细信息组件手动更改活动选项卡后发生的情况的屏幕截图！

Answer 1

我也在使用相同的选项卡并实现如下：

<Tabs ref={(c) => { this.bottomTabRef = c; }} initialPage={0} page={pageNum} onChangeTab={({ from, i }) => { this.setState({ pageNum: i }); this.bottomTabRef.goToPage(0); }}>
<Tab heading="tab1"> 
<Text> Tab1 </Text>
</Tab>
<Tab heading="tab2"> 
<Text> Tab2 </Text>
</Tab>
</Tabs>

更改页面值时 Nativebase 选项卡不更改内容

Nativebase Tabs not changing content when changing page value

reactjs

react-native

native-base

mobx-react

react-navigation