返回时 React Navigation 重新渲染上一页

Question

使用 Stack Navigator 返回时刷新上一页的最佳方式是什么。我返回的页面上似乎没有触发任何生命周期挂钩。我只是使用基本示例和this.props.navigation.goBack()

Answer 1

您可以为此使用addListener

componentDidMount() {

    this.props.navigation.addListener(
      'didFocus',
      payload => {
        this.forceUpdate();
      }
    );

}

Answer 2

在反应功能组件中你可以这样做：

const SomeComponent = (props) => {

useEffect(() => {
        props.navigation.addListener(
            'didFocus',
            payload => {
                //call some action here
            }
        );
    }, [])
}

每当您登陆组件时，上述效果就会触发，只要您从导航堆栈返回并且您想要触发 api 或进行一些计算，它就会起作用。

Answer 3

好的，我在 reddit 上找到了答案。https://www.reddit.com/r/reactnative/comments/69xm4p/react_navigation_tab_change_event/

我使用 hooonkos onNavigationStateChange 方法让它工作了，我粘贴了他在下面创建的示例。我没有想出这个解决方案，所有的功劳都应该归功于 hooonko。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';


class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
      <Icon
        name="home"
        size={30}
        color={tintColor}
      />
    ),
  };

  _myHomeFunction = () => {
    alert('Here is home tab!');
  }

  componentWillReceiveProps(newProps) {
    if (newProps.screenProps.route_index === 0) {
      this._myHomeFunction();
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          Home
        </Text>
      </View>
    );
  }
}

class MyRocketScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Rocket',
    tabBarIcon: ({ tintColor }) => (
      <Icon
        name="rocket"
        size={30}
        color={tintColor}
      />
    ),
  };

  _myRocketFunction = () => {
    alert('Here is rocket tab!');
  }

  componentWillReceiveProps(newProps) {
    if (newProps.screenProps.route_index === 1) {
      this._myRocketFunction();
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          Rocket
        </Text>
      </View>
    );
  }
}

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Rocket: {
    screen: MyRocketScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

class rn extends Component {
  _onNavigationStateChange = (prevState, newState) => {
    this.setState({...this.state, route_index: newState.index});
  }
  render() {
    return (
      <MyApp onNavigationStateChange={this._onNavigationStateChange} screenProps={this.state} />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('rn', () => rn);

Answer 4

这对我有用：

const SomeComponent = (props) => {

    useEffect(() => {
        props.navigation.addListener(
            'focus',
            payload => {
                // call some action here
            }
        );
    }, [])

}

只要导航聚焦在组件上，它就会执行。

对于类组件，这应该可以工作：

componentDidMount() {

  this.props.navigation.addListener(
    'focus',
    payload => {
      // call some action here
    }
  );

}