22、自定义组件：如何满足业务的个性化需求

构造 -> 初始化 -> onHostResume() -> onHostPause() -> onHostDestroy()

public class TestJavaModule extends ReactContextBaseJavaModule 
 implements LifecycleEventListener, ReactModuleWithSpec, TurboModule {
    public TestJavaModule(ReactApplicationContext reactContext) {
       super(reactContext.real());
       reactContext.addLifecycleEventListener(this);
    }

    @Override
    public String getName() {
       return getClass().getSimpleName();
    }

    @Override
    public void onHostResume() {
    }

    @Override
    public void onHostPause() {
    }

    @Override
    public void onHostDestroy() {
       getReactApplicationContext().removeLifecycleEventListener(this); 
    }
}

public void onHostResume(@Nullable Activity activity) {
    Iterator iterator = this.mLifecycleEventListeners.iterator();
    while(iterator.hasNext()) {
        LifecycleEventListener listener = (LifecycleEventListener) iterator.next();
        // 观察者模式，载体页时调用已注册组件的生命周期回调
        listener.onHostResume();
    }
}

@implementation TestNativeModule
RCT_EXPORT_MODULE()

- (instancetype)init{
  self = [super init];
  return self;
}
- (void)dealloc{
  NSLog(@"dealloc");
}

export default (TurboModuleRegistry.getEnforcing<Spec>(
   'TestTurboModule')
  : Spec);

- (void)bridgeDidInvalidateModules:(NSNotification *)notification
{
  RCTBridge *bridge = notification.userInfo[@"bridge"];
  if (bridge != _bridge) {
    return;
  }
  [self _invalidateModules];//销毁所有TurboModules
}

NativeModules.TestModule.testMethod({type: 1, message: "fromJS"}, (result)=>{
    console.info(result);
  }
);

double value = readableMap.getDouble(key);
try {
    // 判断是否为 long 的范围: 超过了 int 的最大值且为整数
    if (value > Integer.MAX_VALUE && value % 1 == 0) {
        long cv = (long) value;
        // 转换成 long 型返回
    }
} catch (Exception e) {
    // 异常时，仍使用 double
}

public class TestModule extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule {
   public TestModule(ReactApplicationContext reactContext) {
      super(reactContext.real());
   }

   @Override
   public String getName() {
      return getClass().getSimpleName();
   }
   
   @ReactMethod
   public void testMethod(ReadableMap data, Callback callback) {
      // 获取 JS 的调用输入参数
      int type = data.getInt("type");
      String message = data.getString("message");
      // 回传数据给 JS
      WritableMap resultMap = new WritableNativeMap();
      map.putInt("code", 1);
      map.putString("message", "success");
      callback.invoke(resultMap);
   }
}

RCT_EXPORT_METHOD(getValueWithCallback : (RCTResponseSenderBlock)callback){
  if (!callback) {
    return;
  }
  callback(@[ @"value from callback!" ]);
}

NativeModules.SystemPropsModule.getSystemModel().then(result=> {
  console.log(result);
}).catch(error=> {
   console.log(error);
});

SystemPropsModule：
...
@ReactMethod
public void getSystemModel(Promise promise) {
    // 回传成功，使用 resolve
    promise.resolve(Build.MODEL);
}
...

componentWillMount(){
   // 拿到原生模块
   var eventEmitterManager = NativeModules.EventEmitterManager;
   const nativeEventEmitter = new NativeEventEmitter(eventEmitterManager);
   const eventEmitterManagerEvent = EventEmitterManager.EventEmitterManagerEvent;
   // 监听 Native 发送的通知
   this.listener = nativeEventEmitter.addListener(eventEmitterManagerEvent, (data) => 
       console.log("Receive native event: " + data);
   );
}

componentWillUnmount(){
   // 移除监听
   this.listener.remove();
}

reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
  .emit("msg", "say hello");

export interface Spec extends TurboModule {
+save: (key: string, value: string, callback: (value: Object) => void) => void;
+get: (key: string, callback: (value: Object) => void) => void;
}
// 导出 StorageModule
export default (TurboModuleRegistry.getEnforcing<Spec>(
'StorageModule',
): Spec);

NativeModules.StorageModule.save("testKey", "testValue", (result)=>{
    console.info(result);
  }
);
NativeModules.StorageModule.get("testKey", (result)=>{
    console.info(result);
  }
);

npx react-native init ReactNativeNewArch --version 0.68.0

1. 修改 android 目录下的 gradle.properties:
# 开启新架构
newArchEnabled=true
# 配置 java home 为 JDK 11
org.gradle.java.home=/Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home

2. 运行
yarn react-native run-android

Java 层：
- MainComponentsRegistry.java
- MainApplicationTurboModuleManagerDelegate.java

C++ 层：
- jni 目录

@Override
protected synchronized void maybeLoadOtherSoLibraries() {
  if (!sIsSoLibraryLoaded) {
    SoLoader.loadLibrary("geektime_new_arch");
    sIsSoLibraryLoaded = true;
  }
}

# You can customize the name of your application .so file here.
LOCAL_MODULE := geektime_new_arch

static constexpr auto kJavaDescriptor =
    "Lcom/reactnativenewarch/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";

constexpr static auto kJavaDescriptor =
    "Lcom/reactnativenewarch/newarchitecture/components/MainComponentsRegistry;";

public void initRN() {
    ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
        .setApplication((Application) getApplicationContext())
        .addPackage(new MainReactPackage())
        .setJSMainModulePath("index.android")
        .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
        .setReactPackageTurboModuleManagerDelegateBuilder(new MainApplicationTurboModuleManagerDelegate.Builder())
        .setJSIModulesPackage(getJSIModulePackage());

    ReactInstanceManager reactInstanceManager = builder.build();
}

static JSIModulePackage getJSIModulePackage() {
  return new JSIModulePackage() {
    @Override
    public List<JSIModuleSpec> getJSIModules(
      final ReactApplicationContext reactApplicationContext,
      final JavaScriptContextHolder jsContext) {
      final List<JSIModuleSpec> specs = new ArrayList<>();
      specs.add(
          new JSIModuleSpec() {
            @Override
            public JSIModuleType getJSIModuleType() {
              return JSIModuleType.UIManager;
            }

            @Override
            public JSIModuleProvider<UIManager> getJSIModuleProvider() {
              final ComponentFactory componentFactory = new ComponentFactory();
              CoreComponentsRegistry.register(componentFactory);
              MainComponentsRegistry.register(componentFactory);

              List<ViewManager> viewManagers = new ArrayList<>();
              ViewManagerRegistry viewManagerRegistry = new ViewManagerRegistry(viewManagers);
              return new FabricJSIModuleProvider(
                  reactApplicationContext,
                  componentFactory,
                  new EmptyReactNativeConfig(),
                  viewManagerRegistry);
            }
          });
      return specs;
    }
  };
}

// 1. 定义 StorageModule，继承 ReactContextBaseJavaModule 类
// 实现 ReactModuleWithSpec & TurboModule 接口
public class StorageModule extends ReactContextBaseJavaModule
    implements ReactModuleWithSpec, TurboModule {
    // native 存储的 sp 文件名称
    private static final String SP_NAME = "rn_storage";
    // 返回给 JS 的结果码
    private static final int CODE_SUCCESS = 1;
    private static final int CODE_ERROR = 2;

    public StorageModule(ReactApplicationContextWrapper reactContext) {
       super(reactContext);
    }

    // 返回 module 名称，一般以类名作为 module 名称
    @Override
    public String getName() {
       return StorageModule.class.getSimpleName();
    }
  
    // 定义供 JS 调用的存储数据方法，isBlockingSynchronousMethod 表示是否同步执行
    @ReactMethod(isBlockingSynchronousMethod = true)
    public void save(String key, String value, Callback callback) {
       WritableMap result = new WritableNativeMap();
       // 如果 js 传入的 key 为空，则回传失败码和信息
       if (TextUtils.isEmpty(key)) {
           result.putInt("code", CODE_ERROR);
           result.putString("msg", "key is empty or null");
           callback.invoke(result);
           return;
       }
       // 调用 native 的 sp 进行数据存储
       SharedPreferences sp = getReactApplicationContext().getSharedPreferences(SP_NAME, Context.MODE_PRIVATE);
       sp.edit().putString(key, value).apply();
       result.putInt("code", CODE_SUCCESS);
       result.putString("msg", "save success");
       // 回传 js 告知存储成功
       callback.invoke(result);
   }

    // 定义供 JS 调用的获取数据方法，isBlockingSynchronousMethod 表示是否同步执行
   @ReactMethod(isBlockingSynchronousMethod = true)
   public void get(String key, Callback callback) {
      // 如果 js 传入的 key 为空，则回传失败码和信息
      WritableMap result = new WritableNativeMap();
      if (TextUtils.isEmpty(key)) {
         result.putInt("code", CODE_ERROR);
         result.putString("msg", "key is empty or null");
         callback.invoke(result);
         return;
      }
      // 调用 native 的 sp 获取 key 对应的 value 值
      SharedPreferences sp = getReactApplicationContext().getSharedPreferences(SP_NAME, Context.MODE_PRIVATE);
      String value = sp.getString(key, "");
      result.putInt("code", CODE_SUCCESS);
      result.putString("data", value);
      // 将结果回传给 js
      callback.invoke(result);
  }
}

public class MyTurboModulePackage extends TurboReactPackage {
    @Override
    public NativeModule getModule(String name, ReactApplicationContext reactContext) {
        switch(name) {
           case "StorageModule":
              return new StorageModule(reactContext);
              break;
           default:
              return null;
        }
    }
    
    @Override
    public ReactModuleInfoProvider getReactModuleInfoProvider() {
      //...
    }
}

ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
   .addPackage(new MyTurboModulePackage());
... // 其他 RN 初始化配置
ReactInstanceManager reactInstanceManager = builder.build();

yarn add react-native-gradle-plugin

include ':app'
rootProject.name = "GeekTimeRNAndroid"
includeBuild('./node_modules/react-native-gradle-plugin')

apply plugin: "com.facebook.react"

配置好后，我们以后就可以使用 codegen 能力了，然后执行 generateCodegenArtifactsFromSchema，最后运行App就可以了。
../gradlew generateCodegenArtifactsFromSchema

//定义一个Spec协议
@protocol DataStorageTurboModuleSpec <RCTBridgeModule, RCTTurboModule>
- (NSString *)getString:(NSString *)string;
@end

//JSI实现
namespace facebook {
namespace react {
class JSI_EXPORT DataStorageTurboModuleSpecJSI : public ObjCTurboModule {
   public:
    DataStorageTurboModuleSpecJSI(const ObjCTurboModule::InitParams &params);
  };
} // namespace react
} // namespace facebook

//定义一些方法
namespace facebook {
  namespace react {
    static facebook::jsi::Value __hostFunction_DataStorageTurboModuleSpecJSI_getString(
    facebook::jsi::Runtime &rt,
    TurboModule &turboModule,
    const facebook::jsi::Value *args,
    size_t count){
    return static_cast<ObjCTurboModule &>(turboModule)
      .invokeObjCMethod(rt, VoidKind, "getString", @selector(getString:), args, count);
  }
   DataStorageTurboModuleSpecJSI::NativeSampleTurboModuleSpecJSI(const ObjCTurboModule::InitParams &params)
    : ObjCTurboModule(params)
  {
    //MethodMetadata 第一个参数为0代表该方法有一个参数
    methodMap_["getString"] = MethodMetadata{1, __hostFunction_DataStorageTurboModuleSpecJSI_getString};
  }
}
}

//TurboModule遵循Spec协议
@interface DataStorageTurboModule : NSObject <DataStorageTurboModuleSpec>

@end

//DataStorageTurboModule.mm
@implementation DataStorageTurboModule
RCT_EXPORT_MODULE()

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params{
  //指定JSI
  return std::make_shared<DataStorageTurboModuleSpecJSI>(params);
}

RCT_EXPORT_METHOD(getString:(NSString *)string){
  NSLog(@"");
}
@end

type NativeProps = $ReadOnly<{|
  ...ViewProps,
  url?: string
|}>; // 定义视频播放的属性，url 为视频地址

export type VideoViewType = HostComponent<NativeProps>;

// 定义视频播放的方法，包括开始播放、停止播放、暂停播放
interface NativeCommands {
  +callNativeMethodToPlayVideo: (
  ) => void;
  +callNativeMethodToStopVideo: (
  ) => void;
  +callNativeMethodToPauseVideo: (
  ) => void;
}

//导出外部调用的命令，包括开始播放、停止播放、暂停播放
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['callNativeMethodToPlayVideo'],
  supportedCommands: ['callNativeMethodToStopVideo'],
  supportedCommands: ['callNativeMethodToPauseVideo'],
});

// 导出包装好的组件，其中 VideoView 为引入 Native 的组件
export default (codegenNativeComponent<NativeProps>(
  'VideoView',
): VideoViewType);

// 导入 ViewView 组件和工具
import VideoView, {
  Commands as VideoViewCommands,
} from './VideoNativeComponent';

// 外部调用此方法即可调用 ViewView 视频播放能力
export default function MyView(props: {}): React.Node {
  return (
     <View>
         <VideoView url={"url"} style={{flex: 1}} />
         <Button title="play" onPress={()=>{
             VideoViewCommands.callNativeMethodToPlayVideo();
           }
         }
     </View>
  )
}

public interface VideoViewManagerInterface<T extends View> {
   void playVideo(T view, String url);
   void stopVideo(T view);
   void pauseVideo(T view);
}

public class MyVideoView extends View {
   // ...
     
   public void playVideo(String url) {
       // 播放视频实现
   }
     
   public void stopVideo() {
      // 停止视频播放实现
   }

   public void pauseVideo() {
      // 暂停视频播放实现
   }
}

@ReactModule(name = VideoViewManager.REACT_CLASS)
public class VideoViewManager: ViewGroupManager<VideoView>(), VideoViewManagerInterface<VideoView> {
     private static final String REACT_CLASS = "VideoView";
     
     public VideoViewManager() {
     }

     override
     public String getName() {
        return REACT_CLASS;
     }
     
     override
     public VideoView createViewInstance(ThemedReactContext reactContext) {
        return new MyVideoView(reactContext);
     }
     
     @ReactProp(name = "url")
     override 
     public void playVideo(VideoView view, String url) {
        view.playVideo(url);
     }
     
     override 
     public void stopVideo(VideoView view) {
        view.stopVideo();
     }

     override 
     public void pauseVideo(VideoView view) {
        view.pauseVideo();
     }
}

List<ViewManager> viewManagers = new ArrayList<>();
viewManagers.add(new VideoViewManager())
ViewManagerRegistry viewManagerRegistry = new ViewManagerRegistry(viewManagers);

return new FabricJSIModuleProvider(
    reactApplicationContext,
    componentFactory,
    new EmptyReactNativeConfig(),
    viewManagerRegistry);

../gradlew generateCodegenArtifactsFromSchema

@interface VideoComponentView : RCTViewComponentView
//声明播放器组件的一些方法
//播放视频
- (void)playVideo;
//停止视频
- (void)stopVideo;
//暂停视频
- (void)pauseVideo;
@end

@protocol VideoComponentViewProtocol <NSObject>
- (void)callNativeMethodToPlayVideo;
- (void)callNativeMethodToStopyVideo;
- (void)callNativeMethodToPauseVideo;
@end

RCT_EXTERN inline void VideoComponentCommand(
        id<VideoComponentViewProtocol> componentView,
        NSString const *commandName,
        NSArray const *args)

    if([commandName isEqualToString:@"callNativeMethodToPlayVideo"]){
        [componentView callNativeMethodToPlayVideo];
        return;
    }
    
    if(![commandName isEqualToString:@"callNativeMethodToStopVideo"]){
        [componentView callNativeMethodToStopVideo];
        return;
    }
    
    if(![commandName isEqualToString:@"callNativeMethodToPauseVideo"]){
        [componentView callNativeMethodToPauseVideo];    
        return;
    }
    return;
)

using namespace facebook::react;

@interface VideoComponentView() <VideoComponentViewProtocol>
@end

@implementation VideoComponentView{
  VideoPlayer *_videoPlayer;
}

#pragma mark - Native Commands
- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args{
  VideoComponentCommand(self, commandName, args);
}

- (void)callNativeMethodToPlayVideo{
  //实现视频播放功能
  [_videoPlayer startPlay];
}

- (void)callNativeMethodToStopVideo{
  //实现视频停止功能
  [_videoPlayer stopPlay];
}

- (void)callNativeMethodToPauseVideo{
  //实现视频暂停功能
  [_videoPlayer pausePlay];
}

#pragma mark - Props
//遵循descriptor协议
+ (ComponentDescriptorProvider)componentDescriptorProvider{
  return concreteComponentDescriptorProvider<VideoComponentDescriptor>();
}

- (instancetype)initWithFrame:(CGRect)frame{
  if (self = [super initWithFrame:frame]) {
    static const auto defaultProps = std::make_shared<const ComponentViewProps>();
    _props = defaultProps;

    _videoPlayer = [[VideoPlayer alloc] init];
    self.contentView = _videoPlayer;
  }
  return self;
}

- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps{
  [super updateProps:props oldProps:oldProps];
}

- (void)onChange:(UIView *)sender{
  // No-op
  //  std::dynamic_pointer_cast<const ViewEventEmitter>(_eventEmitter)
  //      ->onChange(ViewEventEmitter::OnChange{.value = static_cast<bool>(sender.on)});
}

@end

Class<RCTComponentViewProtocol> VideoViewCls(void){
  return VideoComponentView.class;
}

namespace facebook {
namespace react {
using VideoComponentDescriptor = ConcreteComponentDescriptor<VideoViewShadowNode>;
} // namespace react
} // namespace facebook

namespace facebook {
namespace react {
    extern const char VideoViewComponentName[];
    using VideoViewShadowNode = ConcreteViewShadowNode<
         VideoViewComponentName,//组件名
         VideoViewProps>;//注册属性
} // namespace react
} // namespace facebook

namespace facebook {
namespace react {
extern const char VideoViewComponentName[] = "VideoView";//组件名
} // namespace react
} // namespace facebook

namespace facebook {
namespace react {
//属性定义
class VideoViewProps final : public ViewProps {
 public:
  VideoViewProps() = default;
  VideoViewProps(const PropsParserContext& context, const VideoViewProps &sourceProps, const RawProps &rawProps);

  #pragma mark - Props
  std::string url{""};//视频url
};
} // namespace react
} // namespace facebook