Question

我将Context API与React-Native-Navigation结合使用。

我在下面用HOC组件包装屏幕。

this.route.params.pipe(
  // this switchMap() is called when route params changes
  // order$ seems not a Observable, it's misleading to name it with an ending $
  switchMap(() => this.order$.getMailCommande(this.id)),
  // this tap() operator is called after getMailCommande() finish
  tap(() => {
    var retrievedObject = localStorage.getItem('dataCommand');
    var test = JSON.parse(retrievedObject);
    this.over = test.over;
  }),
  // this switchMap() is called after code inside tap is called
  switchMap(() => this.order$.getMoreInfo(this.id, this.type, this.nbr)),
  // this tap() is called after getMoreInfo() finish
  tap(datas2 => {
    var array = datas2.MoreInfo;
    var Object2 = localStorage.getItem('dataCommand');
    var test2 = JSON.parse(Object2);
    test2.ListeInfo.push(array);
    this.over = true;
  })
).subscribe();

这是我的提供商组件

  const ProviderWrap = Comp => props => (
    <Provider>
      <Comp {...props} />
    </Provider>
  );

Navigation.registerComponent('app.AuthScreen', () => ProviderWrap(AuthScreen));
Navigation.registerComponent('app.FindPlaceScreen', () => ProviderWrap(FindPlaceScreen));
Navigation.registerComponent('app.SharePlaceScreen', () => ProviderWrap(SharePlaceScreen));

我的问题是屏幕之间不共享上下文状态。在我的上下文状态中，我在PlacePlaceScreen中添加了一个places数组，该数组工作正常，但是当我转到FindPlaceScreen时，上下文状态位置为空。好像每个屏幕都有两个单独的上下文。

Answer 1

这里是单例对象的示例，您可以在es6类中使用很多实现，也可以使用... es6 examples

var SingletonState = (function () {
    var state;

    function createState() {
        return {someKey:'what ever'};
    }

    return {
        getState: function () {
            if (!state) {
                 state = createState();
            }
            return state;
        }
    };
})();

// usage 
var state1 = SingletonState.getState();
var state2 = SingletonState.getState();

console.log("Same state? " + (state1 === state2));

反应本机导航/上下文API

1 个答案: