标签导航器重点

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个标签的标签导航器。每当Screen3通过选项卡按钮按钮或通过刷新我如何在myscreen中仔细了解此屏幕再次焦点。

Class MYSCREEN extends React.Component{
//some function like on onfocus?
}

我尝试搜索它显示FocusComponent将有效，但事实并非如此。我该怎么办？

Answer 1

由于您使用的是react-navigation，因此可以在导航生命周期事件上使用侦听器。https://reaectnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-to-to to-totes-to 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 Prop添加到您的屏幕组件的道具中，然后在getDerivedStateFromProps方法中捕获该支柱，然后检查ISFOSUSE是否是true，然后返回新状态，以便组件将其返回再次渲染。