Как вызвать обновление состояния с помощью реакции-навигации? - PullRequest
Новая
       107

Как вызвать обновление состояния с помощью реакции-навигации?

0 голосов
/ 23 сентября 2019

В моем приложении 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() не определено.Странно, в документации написано, что она должна быть доступна

Ответы [ 2 ]

2 голосов
/ 23 сентября 2019

вы пытались использовать события навигации для сброса состояния вашего компонента CaptureView?

Я думаю, onWillFocus может помочь.

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

0 голосов
/ 23 сентября 2019

React Navigation не выполняет повторную визуализацию компонента в стеке, находящемся в Tab Naviagtor, чтобы выполнить принудительную повторную визуализацию, чем вы можете использовать прослушиватель событий, подобный этому 

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

    }

вы также можете использовать ReactHOC навигации с навигацией это передача ( 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)
...