小编Adr*_*ver的帖子

反应本机导航/上下文API

我在上下文API中使用React-Native-Navigation。

我在下面用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));
Run Code Online (Sandbox Code Playgroud)

这是我的提供者组件

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 = …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native

6
推荐指数
1
解决办法
1140
查看次数

标签 统计

react-native ×1

reactjs ×1