Question

我有一个TabNavigator

const Tabs = TabNavigator({
    Test: {
        screen: SCA,
        navigationOptions: () => ({
            title: 'Home',
            tabBarIcon: ({ tintColor }) => {
                return (
                    <FAIcon 
                        name='screen1'
                        size={25}
                        color={tintColor}
                    />
                );
            }
        })
    },
    Screen2: {
        screen: SCB,
        navigationOptions: () => ({
            title: 'screen2',
            tabBarIcon: ({ tintColor }) => {
                return (
                    <MIcon
                        name='account-circle'
                        size={25}
                        color={tintColor}
                    />
                );
            }
        })
    },
    screen3: {
        screen: MYSCREEN,
        navigationOptions: () => ({
            title: 'dd',
            tabBarIcon: ({ tintColor }) => {
                return (
                    <MIcon
                        name='account-circle'
                        size={25}
                        color={tintColor}
                    />
                );
            }
        })
    }
}, {
    tabBarPosition: 'top',
    tabBarOptions: {
        showIcon: true,
        showLabel: true,
        inactiveTintColor: Colors.blue,
        activeTintColor: Colors.redColor,
        pressColor: Colors.redColor,
        indicatorStyle: { backgroundColor: Colors.redColor },
        style: {
            backgroundColor: Colors.white
        }
    }
});

基本上，我有3个标签的标签导航器。每当通过Tab键按下屏幕3或通过滑动来使屏幕3聚焦时，如何在MYSCREEN中知道该屏幕再次被聚焦。（屏幕看起来与Playstore应用类似，只需在选项卡上选择屏幕并滑动即可）

Class MYSCREEN extends React.Component{

//some function like on onfocus?

}

我尝试搜索它显示onFocusComponent可以工作，但没有成功。我该怎么办？

Answer 1

由于您使用的是react-navigation，因此可以在导航生命周期事件中使用侦听器。 https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

您可以订阅四个活动：

willFocus-屏幕将聚焦

didFocus-屏幕聚焦（如果有过渡，则过渡完成）

willBlur-屏幕将无法对焦

didBlur-屏幕未聚焦（如果存在过渡，则过渡完成）

您可以根据需要订阅任意数量的内容。这是使用didFocus的示例。您可以轻松地将其复制为所需的全部内容。

因此，在TabNavigator的每个屏幕中，您都可以添加以下内容：

componentDidMount () {
  // add listener 
  this.didFocusSubscription = this.props.navigation.addListener('didFocus', this.didFocusAction);
}

componentWillUmount () {
  // remove listener
  this.didFocusSubscription.remove();
}

didFocusAction = () => {
  // do things here when the screen focuses
}

Answer 2

您可以使用withNavigationFocus HOC将isFocused属性添加到屏幕组件的属性，然后以getDerivedStateFromProps方法捕获该属性，并检查isFocused是否为true，然后返回一个新的状态，以便该组件可以再次呈现。

标签导航器聚焦

2 个答案: