如何使用 react-navigation 触发状态更新？答案

【问题标题】：How to trigger state update with react-navigation?如何使用 react-navigation 触发状态更新？
【发布时间】：2019-09-23 14:42:34
【问题描述】：

在我的 React Native 应用程序中，我试图更改状态并触发组件的重新渲染。当NavBottom 调用this.props.navigation.navigate('captureView') 导航到CaptureView 时应该完成。状态更新应将CaptureView 照片状态变量重置为其原始值。

如何在 React Native 中使用 react-navigation on navigate 更改状态？ https://reactnavigation.org/docs/en/navigation-actions.html

CaptureView 是CaptureStack 的一部分

import { createStackNavigator } from "react-navigation";

const CaptureStack = createStackNavigator({
    captureView: CaptureView,
    detailView: DetailView,
    reportView: ReportView,

});

const Tab = createBottomTabNavigator({
    capture: CaptureStack,
}, {
    initialRouteName: 'capture',
    tabBarComponent: NavBottom
});

CaptureView.js:

import { StackActions, NavigationActions, NavigationEvents } from 'react-navigation';

class CaptureView extends Component {
    static navigationOptions = {}

    constructor(props) {
        super(props);
        console.log("CaptureView: constructor(props)");
    }

    componentDidMount() { // called just once
        console.log("CaptureView: componentDidMount()");
        // this.setState = { // undefined???
        //     photo: null // this needs to be RESET
        // };
    }

    componentWillUnmount() {
        console.log("CaptureView: componentWillUnmount()");
    }

    async onButtonPress() {
        CameraService.takePicture().then((photo)=>{
            this.setState({
                photo: photo
            });

            // More actions

            this.props.navigation.navigate(
                "detailView",
                {
                    id: 'DetailView',
                    photo
                }
            );

        });
    }

    render() {
        return (
            <Camera
                cameraSetter={(cam) => {
                    CameraService.setCamera(cam)
                }}
                photo={this.state.photo}
            />
            <TouchableOpacity onPress={this.onButtonPress.bind(this)}>
                <Text>TAKE PHOTO</Text>
            </TouchableOpacity>
        );
    }
}

然后在应用程序的其他部分有一个按钮可以导航回 CaptureView。

NavBottom.js:

export default class NavBottom extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('captureView')}>
                    <Text>CAMERA</Text>
                </TouchableOpacity>
            </View >);
    }
}

注意事项

我尝试了与失败的 ReactJS（不是 React Native）文档不同的方法：

https://reactjs.org/docs/react-component.html#componentdidmount - componentDidMount() 似乎是文档中推荐的方式，但在我的应用程序中它只被调用一次？
即使componentDidMount() 在开始时被调用一次，但即便如此this.setState() 是未定义的。奇怪，文档说它应该可用

【问题讨论】：

标签： ios react-native react-native-navigation react-state-management react-state

【解决方案1】：

您是否尝试过使用导航事件来重置 CaptureView 组件的状态？

我认为onWillFocus 可能会成功。

https://reactnavigation.org/docs/en/navigation-events.html

【讨论】：

应该在你的情况下工作。通常，只要（屏幕）组件存在于某个堆栈中，它们就会保持挂载状态，因此当您导航回该屏幕时，componentDidMount 不会触发。但是如果你使用 navigation.goBack() 将屏幕从堆栈中弹出，它实际上会卸载，因此我们下次导航到屏幕时会执行 componentDidMount。

【解决方案2】：

React Navigation 不会重新渲染位于 Tab Naviagtor 中的堆栈中的组件为了执行强制重新渲染，您可以使用这样的事件侦听器

 componentDidMount() {
        this._navListener = this.props.navigation.addListener('didFocus', () => {
         //perform any action you want, place your logic here
        });

    }

您也可以使用 React Navigation 的 HOC withNavigation 这将 (isFocused ) 属性传递给连接的组件


componentDidUpdate(prevProps, prevState) {
  if(prevProps.isFocused !== this.props.isFocused){
//place your desired logic here
}

}

withNavigation 的使用

import { withNavigationFocus } from 'react-navigation';
 ...
 ...
 ...

export default withNavigationFocus(YourComponent)

【讨论】：