Совместное использование данных (массив) между двумя экранами в представлении вкладок с использованием реагирования-навигации в реагировать родной

Question

Я использую react-navigation без redux.поэтому у меня есть две вкладки, каждая со своим навигатором стека, по одному экрану.так что мне нужно и массив locations на обоих экранах.В настоящее время я делаю это на обоих экранах:

state = { locations: [] };

componentDidMount() {
  this.getAllLocations();
}

  async getAllLocations() {
    let locations = await this.getMoviesFromApi();
    this.setState({ locations });
  }

Я просто хочу, чтобы этот массив находился в одном месте, и оба компонента должны иметь общий источник правды.поэтому изменения, сделанные на одном экране, отражаются на другом экране.Возможно ли это без излишеств?

Answer 1

Возможно, если у вас есть одноэлементный объект:

export default class SharedData {
  constructor(){
  if(SharedData.instance){
     return SharedData.instance;
   }

   this.state = {locations:[]};
   this.listners =[];
   SharedData.instance = this;
   return SharedData.instance;
 }

 setLocations(locations){
    this.state.locations = locations;
    this.listners.forEach(listner=>listner(this.state.location));
 }
 getLocations(){
     return this.state.locations;
 }
 addListner(listner){
    this.listners.push(listner);
     return listner;
 }
 removeListner(listner){
   let index = this.listners.indexOf(listner);
   if(index > -1){
      this.listners.splice(index,1);
    }
 }
} 

, а затем в каждой вкладке, где вы хотите получить доступ к общим местоположениям, состояние:

// get an instance of SharedData
this.sharedData = new SharedData();
// subscribe to locations changes
this.listner = sharedData.addListner((locations)=>{
   this.setState({locations});
});

 // set locations
 this.sharedData.setLocations([]);

  // unregister when destroying the component
  this.sharedData.removeListner(this.listner);

Answer 2

RN 0.59 открыл большие возможности с его выпуском. Одним из них являются реактивные крючки, которые доступны в последней версии ... в будущем реактивные крючки будут использоваться повсеместно. Доверьтесь мне. Итак, некоторое время назад я искал возможности иметь глобальное состояние с использованием перехватчиков реагирования и нашел библиотеку reactn . Он использует реагирующие нативные хуки, и даже вы можете использовать глобальное состояние в компонентах CLASS. который открывает новую дверь для создания тем и обмена данными. Теперь мое приложение поддерживает светлый / темный режим, динамический размер шрифта, языки и раннюю реализацию «порталов» с использованием только этой библиотеки.

Самое приятное в этом то, что вы можете использовать его как состояние. Нет необходимости в провайдере или лишнем материале (хотя он и предоставляет его). Он может быть интегрирован с навигацией реагирования (самое большее, требуется изменить некоторый исходный код, добавив «n» для реакции и ссылки на глобальную переменную). Это здорово, и я люблю это.

Я размышлял над этой статьей на среде, потому что библиотека не так популярна в сообществе RN, но надеюсь, что вы дадите ей шанс, что библиотека всего 22 КБ, меньше, чем один полный компонент.

В качестве альтернативы вы можете подумать о написании своей собственной библиотеки с использованием хуков. Но это будет сложно. Попробуйте, нет пути назад

Answer 3

Я полагаю, что для достижения вашей цели вам понадобится какой-то механизм для хранения «глобальных данных», и если вам не нравится Redux, потому что для выполнения этой простой задачи совместного использования требуется много настроек глобальные данные, тогда вы должны неустановленные ... что очень легко настроить