选项卡式导航可对本机反应导航做出反应

Question

我有一个使用选项卡式导航的应用程序，但似乎我需要与应用程序启动时未激活的选项卡中的组件进行交互，然后才能显示数据。

我的应用程序中有3个标签，显示附近餐馆的地图，不同成分的列表以及添加剂列表。

所有这些数据集都是在加载页面时从服务器（salesforce）获取的，该页面包含选项卡导航 - 主屏幕组件。这个组件唯一要做的就是加载我的其他三个组件。

现在，当我点击其他标签时，屏幕一直是空白的，直到我滚动或点击页面某处，然后加载UI。我认为这是因为setState调用已经运行，但是当选项卡导航中的第一个组件对用户可见时。

当有人点击新激活的标签时，如何触发呼叫以更新用户界面？ （我仍然在组件中设置状态，还没有使用redux ..这将随着时间而来！）..

下面的组件：

import React, {Component} from 'react';
import {
    View,
    FlatList,
    ActivityIndicator
} from 'react-native';
import {Icon, List, ListItem, SearchBar} from 'react-native-elements';
import {oauth, net} from 'react-native-force';
// todo - implement... import {StackNavigator} from 'react-navigation';

export default class Ingredients extends Component {

    static navigationOptions = {
        tabBarLabel: 'Ingredients',
        title: 'Ingredients',
        tabBarIcon: ({tintColor}) => (
            <Icon
                name='blur-linear'
                color={tintColor}
            />
        )
    };

    constructor(props) {
        super(props);
        this.state = {
            ingredients: [],
            refreshing: false
        };
    }

    componentDidMount() {
        oauth.getAuthCredentials(
            () => this.fetchData(), // already logged in
            () => {
                oauth.authenticate(
                    () => this.fetchData(),
                    (error) => console.log('Failed to authenticate:' + error)
                );
            });
    }

    componentWillUnmount() {
        this.setState({
            ingredients: [],
            refreshing: false
        })
    };

    fetchData = () => {
        this.setState({
            refreshing: true
        });
        net.query('SELECT Id, Ingredient__c, CA_GF_Status_Code__c, CA_Ingredient_Notes__c FROM Ingredient__c ORDER BY Ingredient__c',
            (response) => this.setState({
                ingredients: response.records,
                refreshing: false
            })
        );
    };

    renderHeader = () => {
        //todo - make this actually search something
        return <SearchBar placeholder="Type Here..." lightTheme round/>;
    };

    renderFooter = () => {
        if (!this.state.loading) return null;

        return (
            <View
                style={{
                    paddingVertical: 20,
                    borderTopWidth: 1,
                    borderColor: "#CED0CE"
                }}
            >
                <ActivityIndicator animating size="large"/>
            </View>
        );
    };

    selectIcon = (statusCode) => {
        switch (statusCode) {
            case 0:
                return <Icon type='font-awesome' name='close' color='#80A33F'/>;
            case 1:
                return <Icon type='font-awesome' name='check' color='#80A33F'/>;
            case 2:
                return <Icon type='font-awesome' name='asterisk' color='#80A33F'/>;
            case 3:
                return <Icon type='font-awesome' name='sign-out' color='#80A33F'/>;
            case 4:
                return <Icon type='font-awesome' name='question-circle' color='#80A33F'/>;
            default:
                return <Icon type='font-awesome' name='close' color='#80A33F'/>;
        }
    };

    render() {
        return (
            <List>
                <FlatList
                    data={this.state.ingredients}
                    renderItem={({item}) => (
                        <ListItem
                            title={item.Ingredient__c}
                            subtitle={item.CA_Ingredient_Notes__c}
                            chevronColor='#025077'
                            avatar={this.selectIcon(item.CA_GF_Status_Code__c)}
                            onPress={() => {window.alert('this is being pressed')}}
                        />
                    )}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={this.renderHeader}
                    ListFooterComponent={this.renderFooter}
                    refreshing={this.state.refreshing}
                    onRefresh={this.fetchData}
                />
            </List>
        );
    }
}