时间戳

首页 > 解决方案 > 反应本机导航/上下文 API

reactjs - 反应本机导航/上下文 API

问题描述

我将 React-Native-Navigation 与 Context api 一起使用。

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

  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));

这是我的提供者组件

class Provider extends Component {
  state = {
    placeName: 'hello',
    image: 'https://images.unsplash.com/photo-1534075786808-9b819c51f0b7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4dec0c0b139fb398b714a5c8264b4a9a&auto=format&fit=crop&w=934&q=80',
    places: [],
  }

  textInputHandler = (text) => {
    this.setState({
      placeName: text,
    })
  }

  searchInputHandler = (text) => {
    const SearchedPlace = this.state.places.filter(place => {
      return place.name.includes(text)
    })
    this.setState(prevState => {
      return {
        places: SearchedPlace,
      }
    })
  }

  placeSubmitHandler = () => {
    if (this.state.placeName) {
      this.setState(prevState => {
        return {
          places: [...prevState.places, {
            name: prevState.placeName,
            image: prevState.image,
          }],
          placeName: '',
        }
      })
    } else {
      return;
    }
  }

  placeDeleteHandler = (id, deleteModal) => {
    const newPlaces = this.state.places.filter((place, index) => {
      return index !== id
    })
    this.setState({
      places: newPlaces,
    })
    deleteModal();
  }

  render() {
    return (
      <GlobalContext.Provider value={{
        state: this.state,
        textInputHandler: this.textInputHandler,
        placeSubmitHandler: this.placeSubmitHandler,
        placeDeleteHandler: this.placeDeleteHandler,
        searchInputHandler: this.searchInputHandler,
      }}>
        {this.props.children}
      </GlobalContext.Provider>
    )
  }
}

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

标签： reactjsreact-native

解决方案

这是一个单例对象的例子，有很多实现，你也可以使用 es6 类...... es6 例子

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));

推荐阅读