JS

spec 文件命名规则

spec 文件的命名必须以 NativeComponent 结尾, 比如 我有一个组件叫 MyNativeView , 那 spec 文件的命名必须为 MyNativeViewNativeComponent

spec 示例

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 * @format
 */
 
 
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
import type {Float, BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
import * as React from 'react';
//事件式
type Event = $ReadOnly<{|
  timestamp: Float,
|}>;
 
 
//属性式
type NativeProps = $ReadOnly<{|
  ...ViewProps,
  opacity?: Float,
  onChange?: ?BubblingEventHandler<Event>,
|}>;
 
export type MyNativeViewType = HostComponent<NativeProps>;
// 命令式
interface NativeCommands {
  +callNativeMethodToChangeBackgroundColor: (
    viewRef: React.ElementRef<MyNativeViewType>,
    color: string,
  ) => void;
}
 
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['callNativeMethodToChangeBackgroundColor'],
});
 
export default (codegenNativeComponent<NativeProps>(
  'RNTMyNativeView',
): MyNativeViewType);