如何在使用react-native-navigation时显示组件时触发事件？

Question

我正在使用react-native与react-native-navigation.我想在显示组件时重新加载数据.当用户单击选项卡导航按钮时,将显示该组件.

我应该使用反应生命周期事件还是反应原生导航中的某些内容可以在用户导航回组件时触发功能？

我正在使用redux,我不确定是否可以用来帮助？

这个问题指的onDisplay是我正在寻找的东西.但是我找不到任何关于它的官方文档 - https://github.com/wix/react-native-navigation/issues/130

Answer 1

我喜欢Bruno Reis提出的解决方案.我调整了它以使它更简单.

class Whatever extends Component {
    componentDidMount(){
        this.load()
        this.props.navigation.addListener('willFocus', this.load)
    }
    load = () => {
        ...
    }

}

Answer 2

在文档中，它表明您可以添加一个焦点事件，如下所示：

import React, { useEffect } from 'react'

const MyComponent = ({ navigation }) => {

    useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            // do something
            console.log('Hello World!')
        });
        return unsubscribe;
    }, [navigation]);

    return (
        <View>
            <Text>MyComponent</Text>
        </View>
    )
}

export default MyComponent

Answer 3

将此作为'callIfBackToThisRoute'...

export default ( props, call ) => {
    if( !props.navigation ) throw 'I need props.navigation'
    const thisRoute = props.navigation.state.routeName;
    props.navigation.addListener(
        'willFocus',
        payload => {
            if( payload.state.routeName == thisRoute) call(props)
        }
    );
}

并在您的组件中使用它...

componentDidMount() {
    const { doIt } = this.props;
    doIt()
    callIfBackToThisRoute(
        this.props,
        (props) => doIt()
    )
}