如何使用 react-navigation 触发 state 更新？

Question

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

如何在 React Native 中使用react-navigation在navigate中更改 state ？ 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()是未定义的。 很奇怪，文档说它应该可用

Answer 1

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

我认为onWillFocus可能会成功。

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

Answer 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)