Ios 如何使用react导航触发状态更新？

在我的React本机应用程序中，我试图更改状态并触发组件的重新呈现。当

NavBottom

调用

this.props.navigation.navigate（'captureView'）

导航到

captureView

时，应该执行此操作。状态更新应将

CaptureView

photo state变量重置回其原始值

如何使用

navigate

上的

React-navigation

在React-Native中更改状态

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>
        );
    }
}

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）文档：

• -

  componentDidMount（）

  似乎是文档中推荐的方式，但在我的应用程序中，它只被调用一次
• 即使在开始时调用了一次

  componentDidMount（）

  ，但即使这样，

  this.setState（）

  也未定义。奇怪的是，文件上说应该有

---

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

我认为，

onWillFocus

可能会奏效

---

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

我认为，

onWillFocus

可能会奏效

---

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

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

    }

您还可以使用React Navigation的HOCwith Navigation将（isFocused）道具传递到连接的组件

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

}

withNavigation的使用

---

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

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

    }

您还可以使用React Navigation的HOCwith Navigation将（isFocused）道具传递到连接的组件

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

}

withNavigation的使用

---

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