提问人:DhvaniChavda-impero 提问时间:10/26/2023 最后编辑:DhvaniChavda-impero 更新时间:10/26/2023 访问量:34
如何将React原生组件(如View,Button,Text)传递给原生iOS(Objective-c)
How to Pass React native components(like View,Button,Text) to native iOS(Objective-c)
问:
我在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)
如果有人对此有任何想法,请告诉我
我找到了类似的问题,但没有人能回答这个输入链接描述在这里
答: 暂无答案
评论