react-native-navigation的迁移库

api-component.mdx 2.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. ---
  2. id: component
  3. title: Component
  4. sidebar_label: Component
  5. ---
  6. import Tabs from '@theme/Tabs';
  7. import TabItem from '@theme/TabItem';
  8. ## `registerComponent`
  9. Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component` or `React.PureComponent`. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's `AppRegistry.registerComponent`.
  10. #### Parameters
  11. | Name | Required | Type | Description |
  12. | ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
  13. | componentName | Yes | string | Unique component name - not to be confused with **componentId** |
  14. | componentProvider | Yes | Function | Anonymous function that returns the React component to register, **OR** the component wrapped with Providers|
  15. | concreteComponentProvider | No | Function | Anonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.|
  16. #### Examples
  17. ##### Registering a component
  18. ```js
  19. Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
  20. ```
  21. ##### Registering a component wrapped with Providers
  22. ```js
  23. import { Provider } from 'react-redux';
  24. const store = createStore();
  25. Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
  26. <Provider store={store}>
  27. <MyScreen {...props} />
  28. </Provider>,
  29. () => MyScreen)
  30. );
  31. ```
  32. ## `updateProps`
  33. Update props of a component registered with [registerComponent](#registercomponent). Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
  34. #### Parameters
  35. | Name | Required | Type | Description |
  36. | ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
  37. | componentId | Yes | string | Unique component id |
  38. | options | Yes | object | props object to pass to the component |
  39. #### Example
  40. ```js
  41. Navigation.updateProps('MY_COMPONENT', {
  42. // props to pass to the component
  43. };
  44. ```
  45. :::important
  46. `updateProps` is called with a componentId. This is the same unique id components have in props. Don't confuse it with the `componentName` we use when registering components with [Navigation.registerComponent](#registerComponent).
  47. :::