реакция-навигация: правильное прохождение состояния между экранами

Question

Я пытаюсь передать состояние между экраном. Я следовал инструкциям Передача параметров на маршруты Я могу pass state с моего Начального экрана на подробный экран, но когда я пытаюсь pass back state с подробного экрана на Начальный экран, состояние не передается.

У меня есть кнопка согласия на главном экране, а когда я check on the button и перехожу к подробному экрану, button is checked (пока все хорошо).

Однако, если я uncheck, кнопка из подробностейscreen and navigate back to Home screen the state is still проверено`.

Попробуйте код из экспо

Это мой код начального экрана:

const imageOn = require("./iconCheck.png");
const imageOff = require("./emptyCheck.png");

class HomeScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      agreeState: this.props.navigation.getParam('agreeServiceFromChild'),
    };
  }

  checkStateImage(){
    if(this.state.agreeState === undefined){this.setState({agreeState:false},()=>console.log(this.state.agreeState,'agreeState'))}
    if(this.state.agreeState === true){return(imageOn)}
    if(this.state.agreeState === false){return(imageOff)}
  }
  render() {
        const { navigation } = this.props;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <CustomCheckBox
          onPress={() => this.setState({agreeState: !this.state.agreeState}, ()=> console.log (this.state.agreeState,'agreeState'))}
          onPressButton={() =>
            this.props.navigation.navigate('Details', {
              agreeServiceFromParent:this.state.agreeState,
            })
          }
          source={this.checkStateImage()}
          text='agree'
          buttonText='go to DetailScreen'

        />
      </View>
    );
  }
}

Это моя детальКод экрана:

class DetailsScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      agreeState:this.props.navigation.getParam('agreeServiceFromParent'),
    };
  }

    checkStateImage(){
    if(this.state.agreeState === undefined){return(imageOff)}
    if(this.state.agreeState != undefined && this.state.agreeState === true){return(imageOn)}
    if(this.state.agreeState != undefined && this.state.agreeState === false){return(imageOff)}
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
         <CustomCheckBox
        onPress={() => this.setState({ agreeState: !this.state.agreeState}, ()=> console.log(this.state.agreeState,'agreeServiceFromChild childview'))}
        source={this.checkStateImage()}
        text="agree"
        onPressButton={() =>
            this.props.navigation.navigate('Home', {
              agreeServiceFromChild:this.state.agreeState,
            })
          }
        buttonText='go to HomeScreen'
      />
      </View>
    );
  }
}

Answer 1

вместо того, чтобы вводить конструктор, попробуйте поместить его в componentDidMount (). PFB код обновлен с выставки. и я использовал navigation.push вместо navigation.navigate, coz push всегда делает неявный push на вершине стека навигатора.,

import React from 'react';
import { Button, View, Text, TouchableOpacity, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const imageOn = require("./iconCheck.png");
const imageOff = require("./emptyCheck.png");

class HomeScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      agreeState: false,
    };
  }

  componentDidMount(){
    let stateOfBut = this.props.navigation.getParam('agreeServiceFromChild');
    this.setState({agreeState:stateOfBut})
  }

  checkStateImage(){
    if(this.state.agreeState === undefined){this.setState({agreeState:false},()=>console.log(this.state.agreeState,'agreeState'))}
    if(this.state.agreeState === true){return(imageOn)}
    if(this.state.agreeState === false){return(imageOff)}
  }
  render() {
        const { navigation } = this.props;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <CustomCheckBox
          onPress={() => this.setState({agreeState: !this.state.agreeState}, ()=> console.log (this.state.agreeState,'agreeState'))}
          onPressButton={() =>
            this.props.navigation.navigate('Details', {
              agreeServiceFromParent:this.state.agreeState,
            })
          }
          source={this.checkStateImage()}
          text='agree'
          buttonText='go to DetailScreen'

        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      agreeState:this.props.navigation.getParam('agreeServiceFromParent'),
    };
  }

    checkStateImage(){
    if(this.state.agreeState === undefined){return(imageOff)}
    if(this.state.agreeState != undefined && this.state.agreeState === true){return(imageOn)}
    if(this.state.agreeState != undefined && this.state.agreeState === false){return(imageOff)}
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
         <CustomCheckBox
        onPress={() => this.setState({ agreeState: !this.state.agreeState}, ()=> console.log(this.state.agreeState,'agreeServiceFromChild childview'))}
        source={this.checkStateImage()}
        text="agree"
        onPressButton={() =>
            this.props.navigation.push('Home', {
              agreeServiceFromChild:this.state.agreeState,
            })
          }
        buttonText='go to HomeScreen'
      />
      </View>
    );
  }
}

const CustomCheckBox = ({ onPress, source, text, onPressButton, buttonText }) => (
    <View
      style={{
        marginTop: 14,
        height: 100,
        width: 310,
        backgroundColor: "transparent",
        alignItems: "center",
        justifyContent: "flex-start",
      }}
    >
    <TouchableOpacity onPress={onPress}>
      <View
        style={{
          marginLeft: 7,
          flexDirection:'row',
          backgroundColor: "white",
          borderRadius: 10,
          alignItems: "center",
          justifyContent: "center"
        }}
      >
      <Image style={{ width: 21, height: 21 }} source={source} />
          <Text style={{ marginLeft: 8 }}>{text}</Text>

      </View>

      </TouchableOpacity>

      <Button title={buttonText} onPress={onPressButton}/>

    </View>
);

const RootStack = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen,
});

export default createAppContainer(RootStack);