Question

我坚持反应原生的一个问题，还没有得到任何解决方案。我使用TabNavigator。当我单击一个选项卡时，它将成功调用其中的组件。但是当我通过离开另一个选项卡离开组件，然后返回上一个选项卡时，数据仍然存在/存在。它根本没有重新渲染。如何在TabNavigator中重新加载组件？我尝试使用redux并在组件类中实现componentDidUpdate，但它根本没有调用，似乎不是问题。它只是第二次没有调用的组件类请帮忙。

我的TabNavigator代码：

const AppTabNav = TabNavigator({
Home: {
    screen: AppStack,
    navigationOptions: {
        fontSize: 4,
    }
},
Notification: {
    screen: RequestStack,
    navigationOptions: {
        // headerTitle: 'HRIS',
        // label: 'HRIS',
        fontSize: 4
    }
},
Request222: {
    screen: NotifStack,
    navigationOptions: {
        headerTitle: 'HRIS',
        label: 'HRIS',
        fontSize: 4
    }
},},

{
    tabBarPosition: 'bottom',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
        activeTintColor: '#022846',
        // inactiveBackgroundColor: '#89898b',
        inactiveTintColor: '#89898b',
        upperCaseLabel: false,
        // activeBackgroundColor:'#fff',
        showLabel: true,
        showIcon: true,
        // style: styles.tabBar,
        style: {
            backgroundColor: '#eaeaec'
        },
    },     
});

Answer 1

这是tabnavigator的工作方式。实际上，默认情况下，所有选项卡都会在初始加载中呈现。

对于组件重新加载，这可能会有所帮助。（React Native reload page）

Answer 2

TabNavigator中的屏幕只会呈现一次，除非屏幕上的任何道具或状态值发生变化。这是默认和预期的行为。

如果您在重新访问时需要重新渲染屏幕，可以使用addListener收听焦点事件并相应地更改该屏幕所需的值（ 示例 < / strong> ：执行fetch从服务器获取数据）

addListener - 订阅导航生命周期的更新

React Navigation将事件发送到屏幕订阅它们的组件：


willBlur - 屏幕将无焦点

willFocus - 屏幕将重点关注

didFocus - 屏幕聚焦（如果有转换，转换完成）

didBlur - 屏幕未聚焦（如果有转换，转换已完成）


来自文档的示例

const didBlurSubscription = this.props.navigation.addListener( 'didBlur', payload => { console.debug('didBlur', payload); } ); // Remove the listener when you are done didBlurSubscription.remove(); // Payload { action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' }, context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root', lastState: undefined, state: undefined, type: 'didBlur', };

React Native - 为什么TabNavigator中的组件不再被调用

2 个答案: