时间戳

首页 > 解决方案 > 更改页面值时 Nativebase 选项卡不更改内容

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

问题描述

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

我尝试通过导航将参数传递到父屏幕，如下所示：this.props.navigation.navigate('Menu', {goToOrderDetails: true})然后在菜单屏幕中，我创建了一个componentFocused函数，每次页面处于焦点时，我都会检查该goToOrderDetails参数是否为真，如果是，我正在手动设置用于设置活动选项卡的状态变量。但是，这不起作用，只是直接返回到默认选项卡 (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})当该参数为真时，我将更新 store activeTab 值，如下所示store.updateActiveTab.set(2)：最奇怪的部分是，如果我 console.log 选项卡的值，它是 2！哪个是正确的，我需要它！而且正如我之前提到的，标题的颜色也是活动颜色！只是该选项卡上没有的内容和颜色下划线。是否有必要刷新整个选项卡组件，以便我可以从另一个屏幕更改活动选项卡？我不确定为什么会发生这种行为并且可以使用一些帮助！

这是我从订单详细信息组件手动更改活动选项卡后发生的屏幕截图！ 内容是菜单的内容，菜单和粗体 <code>Recent</code> 是应该显示为活动的页面！

标签： reactjsreact-nativereact-navigationnative-basemobx-react

解决方案

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

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

推荐阅读