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

Question

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

我尝试通过导航将参数传递至父屏幕，如下所示：this.props.navigation.navigate('Menu', {goToOrderDetails: true})，然后在菜单屏幕中，我做了一个componentFocused函数，每次页面处于焦点状态时，我都会检查[ C0]参数为true，如果是，则我手动设置用于设置活动选项卡的状态变量。但是，此操作不起作用，只能直接返回默认选项卡（0），但是样式颜色指示器在正确的选项卡上，但是内容是第一个选项卡的内容。

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

goToOrderDetails

并且我试图将导航参数从订单详细信息屏幕发送到此屏幕，如下所示：

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);

，并且当该参数为true时，我正在更新存储activeTab值，如下所示：this.props.navigation.navigate('Menu',{goToOrderDetails: true})。最奇怪的部分是，如果我console.log选项卡值是2！我需要它是正确的！正如我前面提到的，标题的颜色也是活动颜色！只是该选项卡上没有的内容和颜色下划线。是否有必要刷新整个选项卡组件，以便可以从另一个屏幕更改活动的选项卡？我不确定为什么会发生这种现象，可以使用一些帮助！

这里是我从订单详细信息组件中手动更改活动标签后发生的截图！store.updateActiveTab.set(2)

Answer 1

感谢此人@xSkrappy在此我从上面的链接中获得了基本思路，并根据需要进行了更改。

由于我需要通过其他标签更改标签中的数据。所以我用这种方法解决了。

在该文件中使您实际上将本机基本Tab放在其中的功能。我已经将该功能置于状态中。 （在制表符文件中）

https://stackoverflow.com/a/46721776/11392122

我的主要目标是在某些标签中获取此totalSale的更新值。因此，我还在状态中放置了一个函数名称changeFunc，以便在其他选项卡中将此函数调用为总体选项卡中的totalSale的setState。

要将其发送到其他标签，我不了解其他标签程序，我在这里只使用了本地基本标签。所以下一步是：

    this.state= {
    msg:"hey",
    totalSale: 0,
    changefunc : (x) => {
    this.setState({
    totalSale: x,
    }); }

所以现在在saleTab中，每当我更改totalSale的值时，我都将其称为：

    <Container>
    <Tabs  transparent  >
    <Tab heading='Sale'>
       <SaleTab sampleProp= {this.state.changefunc}/>
    </Tab>
    <Tab >
       <TotalTab navigation={this.props.navigation}  sampleProp= 
        {this.state.totalSale}  />
    </Tab>

并且为了访问其他选项卡中更改的值，我直接在标签上称呼它：

     this.props.sampleProp(tsale);  //tsale is any value entered for totalSale

确保您像这样在构造函数中传递道具：

     <Label>{this.props.sampleProp} PKR</Label>