react-native-macos/Libraries/Utilities/codegenNativeComponent.js

64 строки
2.0 KiB
JavaScript
Исходник Обычный вид История

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
// TODO: move this file to shims/ReactNative (requires React update and sync)
'use strict';
import requireNativeComponent from '../../Libraries/ReactNative/requireNativeComponent';
Introduce flow type to differentiate between HostComponent, NativeMethodsMixin, and NativeComponent Summary: In React Native there are three types of "Native" components. ``` createReactClass with NativeMethodsMixin ``` ``` class MyComponent extends ReactNative.NativeComponent ``` ``` requireNativeComponent('RCTView') ``` The implementation for how to handle all three of these exists in the React Native Renderer. Refs attached to components created via these methods provide a set of functions such as ``` .measure .measureInWindow .measureLayout .setNativeProps ``` These methods have been used for our core components in the repo to provide a consistent API. Many of the APIs in React Native require a `reactTag` to a host component. This is acquired by calling `findNodeHandle` with any component. `findNodeHandle` works with the first two approaches. For a lot of our new Fabric APIs, we will require passing a ref to a HostComponent directly instead of relying on `findNodeHandle` to tunnel through the component tree as that behavior isn't safe with React concurrent mode. The goal of this change is to enable us to differentiate between components created with `requireNativeComponent` and the other types. This will be needed to be able to safely type the new APIs. For existing components that should support being a host component but need to use some JS behavior in a wrapper, they should use `forwardRef`. The majority of React Native's core components were migrated to use `forwardRef` last year. Components that can't use forwardRef will need to have a method like `getNativeRef()` to get access to the underlying host component ref. Note, we will need follow up changes as well as changes to the React Renderer in the React repo to fully utilize this new type. Changelog: [Internal] Flow type to differentiate between HostComponent and NativeMethodsMixin and NativeComponent Reviewed By: jbrown215 Differential Revision: D17551089 fbshipit-source-id: 7a30b4bb4323156c0b2465ca41fcd05f4315becf
2019-09-25 20:10:48 +03:00
import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
import UIManager from '../ReactNative/UIManager';
// TODO: import from CodegenSchema once workspaces are enabled
type Options = $ReadOnly<{|
interfaceOnly?: boolean,
paperComponentName?: string,
paperComponentNameDeprecated?: string,
excludedPlatform?: 'iOS' | 'android',
|}>;
Introduce flow type to differentiate between HostComponent, NativeMethodsMixin, and NativeComponent Summary: In React Native there are three types of "Native" components. ``` createReactClass with NativeMethodsMixin ``` ``` class MyComponent extends ReactNative.NativeComponent ``` ``` requireNativeComponent('RCTView') ``` The implementation for how to handle all three of these exists in the React Native Renderer. Refs attached to components created via these methods provide a set of functions such as ``` .measure .measureInWindow .measureLayout .setNativeProps ``` These methods have been used for our core components in the repo to provide a consistent API. Many of the APIs in React Native require a `reactTag` to a host component. This is acquired by calling `findNodeHandle` with any component. `findNodeHandle` works with the first two approaches. For a lot of our new Fabric APIs, we will require passing a ref to a HostComponent directly instead of relying on `findNodeHandle` to tunnel through the component tree as that behavior isn't safe with React concurrent mode. The goal of this change is to enable us to differentiate between components created with `requireNativeComponent` and the other types. This will be needed to be able to safely type the new APIs. For existing components that should support being a host component but need to use some JS behavior in a wrapper, they should use `forwardRef`. The majority of React Native's core components were migrated to use `forwardRef` last year. Components that can't use forwardRef will need to have a method like `getNativeRef()` to get access to the underlying host component ref. Note, we will need follow up changes as well as changes to the React Renderer in the React repo to fully utilize this new type. Changelog: [Internal] Flow type to differentiate between HostComponent and NativeMethodsMixin and NativeComponent Reviewed By: jbrown215 Differential Revision: D17551089 fbshipit-source-id: 7a30b4bb4323156c0b2465ca41fcd05f4315becf
2019-09-25 20:10:48 +03:00
export type NativeComponentType<T> = HostComponent<T>;
function codegenNativeComponent<Props>(
componentName: string,
options?: Options,
): NativeComponentType<Props> {
let componentNameInUse =
options && options.paperComponentName
? options.paperComponentName
: componentName;
if (options != null && options.paperComponentNameDeprecated != null) {
if (UIManager.getViewManagerConfig(componentName)) {
componentNameInUse = componentName;
} else if (
options.paperComponentNameDeprecated != null &&
UIManager.getViewManagerConfig(options.paperComponentNameDeprecated)
) {
componentNameInUse = options.paperComponentNameDeprecated;
} else {
throw new Error(
`Failed to find native component for either ${componentName} or ${options.paperComponentNameDeprecated ||
'(unknown)'}`,
);
}
}
// If this function is run at runtime then that means the view configs were not
// generated with the view config babel plugin, so we need to require the native component.
//
// This will be useful during migration, but eventually this will error.
Introduce flow type to differentiate between HostComponent, NativeMethodsMixin, and NativeComponent Summary: In React Native there are three types of "Native" components. ``` createReactClass with NativeMethodsMixin ``` ``` class MyComponent extends ReactNative.NativeComponent ``` ``` requireNativeComponent('RCTView') ``` The implementation for how to handle all three of these exists in the React Native Renderer. Refs attached to components created via these methods provide a set of functions such as ``` .measure .measureInWindow .measureLayout .setNativeProps ``` These methods have been used for our core components in the repo to provide a consistent API. Many of the APIs in React Native require a `reactTag` to a host component. This is acquired by calling `findNodeHandle` with any component. `findNodeHandle` works with the first two approaches. For a lot of our new Fabric APIs, we will require passing a ref to a HostComponent directly instead of relying on `findNodeHandle` to tunnel through the component tree as that behavior isn't safe with React concurrent mode. The goal of this change is to enable us to differentiate between components created with `requireNativeComponent` and the other types. This will be needed to be able to safely type the new APIs. For existing components that should support being a host component but need to use some JS behavior in a wrapper, they should use `forwardRef`. The majority of React Native's core components were migrated to use `forwardRef` last year. Components that can't use forwardRef will need to have a method like `getNativeRef()` to get access to the underlying host component ref. Note, we will need follow up changes as well as changes to the React Renderer in the React repo to fully utilize this new type. Changelog: [Internal] Flow type to differentiate between HostComponent and NativeMethodsMixin and NativeComponent Reviewed By: jbrown215 Differential Revision: D17551089 fbshipit-source-id: 7a30b4bb4323156c0b2465ca41fcd05f4315becf
2019-09-25 20:10:48 +03:00
return (requireNativeComponent<Props>(
componentNameInUse,
): HostComponent<Props>);
}
export default codegenNativeComponent;