如何将React原生组件(如View,Button,Text)传递给原生iOS(Objective-c)

How to Pass React native components(like View,Button,Text) to native iOS(Objective-c)

提问人:DhvaniChavda-impero 提问时间:10/26/2023 最后编辑:DhvaniChavda-impero 更新时间:10/26/2023 访问量:34

问:

我在react native中有一个视图,现在我想将该视图传递到本机iOS中,但我不知道是否可能,如果可能的话,如何实现它

我已经实现了一些代码,在这里我分享了代码

ViewController.h 代码

// ViewController.h
#import <React/RCTViewManager.h>

@interface CustomComponentManager : RCTViewManager

@end

ViewController.m 代码

// ViewController.m
#import "ViewController.h"
#import <React/RCTRootView.h>
@interface CustomViewController ()

- (void)addReactNativeComponent:(NSString *)componentName;

@end

@implementation CustomViewController

RCT_EXPORT_MODULE(CustomComponent)

- (UIView *)view {
    // Return a custom UIView to host the React Native component
    return [[UIView alloc] init];
}
- (void)addReactNativeComponent:(NSString *)componentName{
  // Initialize the React Native bridge
     RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
  // Create a React Native component using the componentName
      RCTRootView *reactNativeView = [[RCTRootView alloc] initWithBridge:bridge moduleName:componentName initialProperties:nil];
  // Add the React Native component to your custom UIView
     [self.view addSubview:reactNativeView];
}
@end

App.tsx 代码

//App.tsx

import React, {useEffect, useRef, useState} from 'react';
import type {PropsWithChildren} from 'react';
import {
  LogBox,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  NativeModules,
  AppState,
  requireNativeComponent,
} from 'react-native';

LogBox.ignoreLogs(['new NativeEventEmitter']); // Ignore log notification by message
LogBox.ignoreAllLogs();

const CustomComponent = requireNativeComponent('CustomComponent');

const App = () => {
  console.log(NativeModules, 'native>>>>>>>>>>>>>>>>.');
  const {ViewController} = NativeModules;

  console.log('ViewController>>>>>>>>>>>>.', ViewController);
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);
  useEffect(() => {
    console.log('App state>>>>>>', appStateVisible);
    NativeModules.CustomComponent.addReactNativeComponent('MyCustomReactNativeComponent');
    if (appStateVisible == 'background') {
      // ViewController.setupCustomView()
    }
  }, []);

  const handlePiPButtonPress = () => {
    console.log('pip button presss>>>>>>>>');
  };
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <Text>React Native Pip</Text>
      </View>
      <CustomComponent style={{ width: 200, height: 200 }} />
    </SafeAreaView>
   
  );
};
export default App;

但是我不知道对不对,我必须将<CustomComponent style={{ width: 200, height: 200 }} />传递给原生iOS(objective-c)

如果有人对此有任何想法,请告诉我

我找到了类似的问题,但没有人能回答这个输入链接描述在这里

iOS Objective-C 原生 反应原生 组件

评论


答: 暂无答案