Question

我有ScreenA要单击下一个屏幕B然后返回屏幕A未调用函数componentWillMount（）

ScreenA - ＆gt;下一步 - ＆gt; ScreenB - ＆gt;返回（） - ＆gt; ScreenA

如何在后退动作中重新加载Rout屏幕

Class 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

从“反应”中导入React 从“react-native”导入{Button}

class ScreenB extends Component {

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

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

Answer 1

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

Class 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。但我们可以通过一些技巧来实现我们的目标。

方式1

使用一个函数来处理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()} />
    )
  }
}

方式2

尝试使用react-navigation侦听器https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

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

方式3

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

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

React Native Reload屏幕A In Back action

2 个答案:

方式1

方式2

方式3