react-native-navigation的迁移库

docs-externalComponent.mdx 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. ---
  2. id: externalComponent
  3. title: External Component
  4. sidebar_label: External Component
  5. ---
  6. The ExternalComponent layout allows you to display any native view as a screen. To use the External Component we'll need to register it with a string name. This name is then used when declaring layouts in JS.
  7. ## Android
  8. ### Implementing the native component
  9. When it comes to implementing an external component on Android, you have two choices. We recommend you use a base class extending `View`. If you're required to use Fragments, you'll find an basic example below.
  10. #### ViewGroup
  11. ```java
  12. public class ViewGroupComponent implements ExternalComponent {
  13. private final FrameLayout content;
  14. ViewGroupComponent(FragmentActivity activity, JSONObject props) {
  15. content = new FrameLayout(activity);
  16. }
  17. @Override
  18. public View asView() {
  19. return content;
  20. }
  21. }
  22. ```
  23. #### Fragment
  24. Using a Fragment as an external component is done by attaching the Fragment to a FrameLayout, and returning the FrameLayout from the `asView()` method of the ExternalComponent.
  25. ```java
  26. public class FragmentComponent implements ExternalComponent {
  27. private final FrameLayout content;
  28. FragmentComponent(FragmentActivity activity, JSONObject props) {
  29. // Create the FrameLayout to which we'll attach our Fragment to
  30. content = new FrameLayout(activity);
  31. content.setId(R.id.fragment_screen_content);
  32. // Attach the Fragment to the FrameLayout
  33. activity.getSupportFragmentManager()
  34. .beginTransaction()
  35. .add(R.id.fragment_screen_content, createFragment(props))
  36. .commitAllowingStateLoss();
  37. }
  38. private FragmentScreen createFragment(JSONObject props) {
  39. FragmentScreen fragment = new FragmentScreen();
  40. // Pass the props sent from Js in a bundle
  41. Bundle args = new Bundle();
  42. args.putString("text", props.optString("text", ""));
  43. fragment.setArguments(args);
  44. return fragment;
  45. }
  46. @Override
  47. public View asView() {
  48. return content;
  49. }
  50. }
  51. ```
  52. ### Registering the component
  53. ```java
  54. public class MainApplication extends NavigationApplication {
  55. @Override
  56. public void onCreate() {
  57. super.onCreate();
  58. registerExternalComponent("MyExternalComponent", new FragmentCreator());
  59. }
  60. }
  61. ```
  62. ## iOS
  63. ### ViewController registration
  64. ```objectivec
  65. [ReactNativeNavigation registerExternalComponent:@"MyExternalComponent" callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
  66. return [[ExternalViewController alloc] initWithProps:props];
  67. }];
  68. ```
  69. ## Using the component from JS
  70. Once you've registered the external component in native, you can use it in your layout declarations.
  71. For example, to show an external component modally:
  72. ```js
  73. Navigation.showModal({
  74. externalComponent: {
  75. name: 'MyExternalComponent',
  76. passProps: {
  77. text: "Text from JS"
  78. }
  79. }
  80. });
  81. ```
  82. :::caution
  83. props passed to external components are sent over the bridge and therefore must be serializable.
  84. :::