React Native - данные теряются при переключении между экранами с использованием реагирования-навигации и реагирования-избыточности - PullRequest
Новая
       7

React Native - данные теряются при переключении между экранами с использованием реагирования-навигации и реагирования-избыточности

0 голосов
/ 01 апреля 2019

Я использую реагирующий-редукс и реагирующую навигацию с моим собственным приложением реагирования.

У меня есть компонент с именем photolist, который получает все фотографии из базы данных. Есть два экрана, которые вызывают этот компонент. Экран userProfile передает true и userId в photolist для фотографий пользователя; feed экран передает ложь и ноль до photolist для всех фотографий.

В App.js я поместил экран «Подача» и «Пользователь» в один стек, чтобы я мог легко перемещаться.

При таком подходе я могу загрузить главную страницу при загрузке приложения, просмотреть все фотографии, затем перейти на страницу пользователя и просмотреть фотографии пользователя. Но со страницы пользователя, когда я нажимаю кнопку "Назад", чтобы вернуться на главную страницу, фотографии больше не загружаются. Обратите внимание, что в этой последовательности действий функция componentDidMount() компонента photolist имеет звонил ровно дважды; при возврате к основному каналу из userProfile он не вызывается снова.

Есть идеи о том, почему это происходит и как я могу решить это? Есть ли способ сохранить структуру навигации, при которой нажатие кнопки «Назад» из 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 }
});

1 Ответ

0 голосов
/ 01 апреля 2019

React Navigation не монтирует и не демонтирует компоненты при навигации в стеке.Вместо этого компоненты остаются подключенными и имеют настраиваемые события жизненного цикла реагирующей навигации .

Добавление компонента <NavigationEvents> в вашу сцену - это один из способов исправить ваш сценарий использования.: 

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>
    }
  }
}
...