react-native-navigation的迁移库

stack-programmatically.mdx 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. ---
  2. id: stack-programmatically
  3. title: Interact programmatically with the Stack
  4. sidebar_label: Interact programmatically
  5. ---
  6. The Navigation object provides ways to programmatically manipulate the stack.
  7. ## Interact with the Stack by componentId
  8. Each layout pushed into the stack has an id. When in the context of a component, The component's `componentId` can be used to interact with a parent stack.
  9. When using a component's componentId, the native implementation knows to perform the command on the parent Stack of this component.
  10. In this example, we push a screen onto the component's parent stack.
  11. ```jsx
  12. const React = require('react');
  13. const Navigation = require('react-native-navigation');
  14. class MyComponent extends React.Component {
  15. onButtonClick = () => {
  16. Navigation.push(this.props.componentId, {
  17. component: {
  18. name: 'PUSHED_SCREEN'
  19. }
  20. });
  21. }
  22. }
  23. ```
  24. ## Interact with the Stack by a predefined id
  25. Sometimes we're required to interact with a specific stack not from the context of a component pushed into it. To do so, assign the stack a predefined `id` and use it when invoking any stack command.
  26. ```js
  27. Navigation.setRoot({
  28. root: {
  29. stack: {
  30. id: 'MyStack', // This is the id we're going to use when interacting with the stack
  31. children: [
  32. {
  33. component: {
  34. name: 'SomeComponent'
  35. }
  36. }
  37. ]
  38. }
  39. }
  40. });
  41. function push() {
  42. Navigation.push('MyStack', {
  43. component: {
  44. name: 'PushedScreen'
  45. }
  46. });
  47. }
  48. ```