React Native - 使用react-navigation和react-redux在屏幕之间切换时数据会丢失

Question

我正在使用react-redux和react-navigation与我的本机应用程序。

我有一个名为photolist的组件，可以从数据库中获取所有照片。有两个屏幕可以调用此组件。 userProfile屏幕将true和userId传递给photolist以获取用户的照片; feed屏幕将所有照片的false和null传递给photolist。

在App.js中，我将Feed屏幕和User屏幕放在同一个堆栈中，这样我就可以轻松导航。

通过这种方法，我可以在App load上加载主页面，查看所有照片，然后转到用户页面并查看用户的照片。但是从用户页面，当我单击后退按钮返回主页面时，不再加载任何照片。请注意，在这一系列动作中，photolist组件的componentDidMount()函数被称为两次;当从userProfile返回主Feed时，不会再次调用它。

任何关于为什么会发生这种情况的想法以及如何解决这个问题？有没有办法保持导航结构，点击userProfile的后退按钮，你会回到主进纸页面的位置，而无需再次重新加载主进纸？

photolist.js：

class PhotoList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        const { isUser, userId } = this.props;

        // load a single user's photos or all photos
        if (isUser) {
            this.props.loadFeed(userId);
        } else {    
            this.props.loadFeed();
        }
    }

    render(){
        return (
            <View style={{flex:1}}>
                <FlatList
                    data = {(this.props.isUser) ? this.props.userFeed : this.props.mainFeed}
                    keyExtractor = {(item, index) => index.toString()}

                    ...
                />
            </View>
        )
    }
}

const mapStateToProps = state => {
    return {
        mainFeed: state.feed.mainFeed,
        userFeed: state.feed.userFeed
    }
}

const mapDispatchToProps = {
    loadFeed
};

export default connect(mapStateToProps, mapDispatchToProps)(PhotoList);

feed.js：

<PhotoList isUser={false} navigation={this.props.navigation}/>

userProfile.js：

<PhotoList isUser={true} userId={this.state.userId} navigation={this.props.navigation}/>

App.js：

const FeedScreenStack = createStackNavigator({
  FeedStack: { screen: feed },
  UserProfile: { screen: userProfile }
});

Answer 1

在堆栈中导航时，React Navigation不会装入和卸载组件。相反，组件保持安装并具有custom react-navigation lifecycle events。

在场景中添加<NavigationEvents> component是修复用例的一种方法：

import { NavigationEvents } from 'react-navigation';

class PhotoList extends React.Component {
  componentDidMount() {
    this.loadFeed();
  }

  loadFeed = () => {
    const { isUser, userId } = this.props;

    // load a single user's photos or all photos
    if (isUser) {
      this.props.loadFeed(userId);
    } else {    
      this.props.loadFeed();
    }
  }

  render() {
    return {
      <View>
        <NavigationEvents
          onDidFocus={this.loadFeed}
        />
      </View>
    }
  }
}