使用反应本机中的反应导航在选项卡视图中的两个屏幕之间共享数据（数组）

Question

我正在使用 react-navigation 而没有 redux。所以我有两个选项卡，每个选项卡都有自己的堆栈导航器，每个选项卡都有一个屏幕。所以我在两个屏幕上都需要 locations 数组。目前我在两个屏幕上都这样做：

state = { locations: [] };

componentDidMount() {
  this.getAllLocations();
}

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

我只想把这个数组放在一个位置，两个组件应该共享这个单一的事实来源。因此任何一个屏幕所做的更改都会反映在另一个屏幕中。如果没有 redux，这可能吗？

Answer 1

我想为了实现您的目标，您将需要某种存储机制 'global data'，如果您不喜欢 Redux，因为它需要大量设置才能实现这一简单共享全球数据的任务，那么你 unstated ...设置起来很简单

Answer 2

如果你有一个单例对象是可能的:

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.locations));
 }
 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 3

RN 0.59 的发布开启了巨大的可能性。其中之一就是react hooks，最新版本就有了……以后到处都会用到react hooks。相信我。因此，不久前，我寻找使用 React Hooks 实现全局状态的可能性，并找到了 reactn 库。它使用 React Native 钩子，甚至你可以在 CLASS 组件中使用全局状态。这为主题化和共享数据打开了一扇新的大门。现在，我的应用程序支持 light/dark 模式、动态字体大小、语言以及仅使用此库的 "portals" 的早期实现。

它最好的部分是你可以像状态一样使用它。不需要提供者或 redux 的东西（尽管它提供了）。可以和react navigation集成（需要修改一些源码，顶多加个"n"来react，引用全局变量）。很棒，我喜欢它。

我一直在考虑在 medium 上写一篇关于这个的文章，因为这个库在 RN 社区并不那么流行，但希望你能给它一个机会，这个库只有 22KB，还不到一个完整的组件。

作为替代方案，您可以考虑使用挂钩编写您自己的库。但这会很难。试一试，没有回头路

使用反应本机中的反应导航在选项卡视图中的两个屏幕之间共享数据（数组）

Sharing data (an array) between two screens in tabs view using react-navigation in react native

reactjs

react-native

react-navigation

react-state