React Native Reload Screen A In Back 动作

Question

我让 ScreenA 单击下一个 ScreenB 然后返回到 Screen A 不调用函数 componentWillMount()

ScreenA -> Next -> ScreenB -> Back() -> ScreenA

如何在背部动作中重新加载溃败屏幕

类 ScreenA

import React from "react";
import { Button, Text, View } from "react-native";

class ScreenA extends Component {
  constructor(props){
    super(props)
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        })
      }
  }

  componentWillMount() {
        fetch(MYCLASS.DEMAND_LIST_URL, {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
                },                    
                body: JSON.stringify({
                  userId:'17'})
            })
            .then((response) => response.json())
            .then((responseData) => {
              if (responseData.status == '1') {
                var data =  responseData.data
                this.setState({                  
                  dataSource: this.state.dataSource.cloneWithRows(data),
                });
              }
            })
            .done();
      }


  onPress = () => {
    this.props.navigate("ViewB");
  };

  render() {
    return (
      <View>
        <Text>test</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

类 ScreenB

import React from "react" import { Button } from "react-native"

---

class ScreenB extends Component {
  
   render() {
    const {goBack} = this.props.navigation;

    return( 
          <Button title="back" onPress={goBack()} /> 
         )
   }
}    

Answer 1

类 ScreenA

import React from "react";
import { Button, Text, View } from "react-native";

class ScreenA extends Component {
  constructor(props){
    super(props)
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        })
      }
  }

  componentWillMount() {
    this.getData()
  }

  getData() {
        fetch(MYCLASS.DEMAND_LIST_URL, {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
                },                    
                body: JSON.stringify({
                  userId:'17'})
            })
            .then((response) => response.json())
            .then((responseData) => {
              if (responseData.status == '1') {
                var data =  responseData.data
                this.setState({                  
                  dataSource: this.state.dataSource.cloneWithRows(data),
                });
              }
            })
            .done();
      }


  onPress = () => {
    this.props.navigate("ViewB", { onSelect: this.onSelect, getData: () => this.getData() });
  };

  render() {
    return (
      <View>
        <Text>test</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

类 ScreenB

class ScreenB extends Component {
   componentWillUnmount() {
     this.props.navigation.state.params.getData()
   }

   render() {
    const {goBack} = this.props.navigation;

    return( 
          <Button title="back" onPress={goBack()} /> 
         )
   }
}

Answer 2

作为使用堆栈的反应导航。当我们导航到另一个屏幕时，当前屏幕保持原样，另一个屏幕显示在当前屏幕上。这意味着主管仍然存在。仅当组件再次创建时组件才会重新加载（回收），但此时组件不会更改。我们可以重新加载数据并重新渲染数据。

默认情况下，反应导航不为 onBack 事件提供任何 api。但是我们可以通过一些技巧来实现我们的目标。

方式一

使用一个函数来处理 onBack 事件并将其传递给导航屏幕

class ScreenA extends Component {
  onBack() {
    // Back from another screen
  }

  render() {
    const { navigation } = this.props
    return (
      <Button title="Open ScreenB" onPress={() => navigation.navigate('ScreenB', { onBack: this.onBack.bind(this) })} />
    )
  }
}

// In this ScreenB example we are calling `navigation.goBack` in a function and than calling our onBack event
// This is not a safest as if any device event emmit like on android back button, this event will not execute
class ScreenB extends Component {
  goBack() {
    const { navigation } = this.props
    navigation.goBack()
    navigation.state.params.onBack();  // Call onBack function of ScreenA
  }

  render() {
    return (
      <Button title="Go back" onPress={this.goBack.bind(this)} />
    )
  }
}

// In this ScreenB example we are calling our onBack event in unmount event.
// Unmount event will call always when ScreenB will destroy
class ScreenB extends Component {

  componentWillUnmount() {
    const { navigation } = this.props
    navigation.state.params.onBack();
  }

  render() {
    return (
      <Button title="Go back" onPress={() => this.props.navigation.goBack()} />
    )
  }
}

方式二

尝试反应导航侦听器https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

我们在这方面有一些限制。我们有模糊和焦点事件。你可以把你的逻辑放在焦点上。每当您从另一个屏幕返回时，ScreenA 都会聚焦并且我们可以执行我们的逻辑。但是有一个问题，每当我们第一次获得焦点或最小化并重新打开应用程序时，都会执行此操作。

方式三

https://github.com/satya164/react-navigation-addons#navigationaddlistener

我不确定这种方式，我没有尝试过。