我在上下文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)