React Native UI 组件方法

Posted 2023-02-23

【中文标题】React Native UI 组件方法

【英文标题】：React Native UI Component Method

【发布时间】：2017-11-24 23:42:35

【问题描述】：

我正在创建自己的自定义 ui 组件，用于在 Objective-c 中进行本机反应，到目前为止一切正常，除了我似乎无法在我的组件上调用任何方法。这是我的目标-c

#import "RNTWebViewManager.h"
#import <WebKit/WebKit.h>

@interface RNTWebViewManager()

@property (strong, nonatomic) WKWebView *webView;

@end

@implementation RNTWebViewManager

@synthesize webView;

RCT_EXPORT_MODULE()

- (UIView *)view 
  webView = [[WKWebView alloc] init];
  return  webView;


RCT_EXPORT_METHOD(loadWebsite:(NSString *)url)

  RCTLogInfo(@"Opening url %@",url);
  [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];
;

@end

这是我对应的javascript代码：

import React,  Component  from 'react';
import 
  requireNativeComponent,
  AppRegistry,
  StyleSheet,
  Button,
  Text,
  View
 from 'react-native';

// Load Native ios Components
var RNTWebView = requireNativeComponent('RNTWebView', null);

class WebView extends Component 
  render() 
    return (
      <RNTWebView style=styles.webView />
    )
  


export default class iOSComponents extends Component 
  componentDidMount() 
    RNTWebView.loadWebsite("http://www.google.com/");
  
  render() 
    return (
      <View style=styles.webView>
        <View style=styles.statusBar />
        <WebView />
      </View>
    );
  


const styles = StyleSheet.create(
  statusBar: 
    height:22,
  ,
  webView: 
    flex:1,
  
);

AppRegistry.registerComponent('iOSComponents', () => iOSComponents);

当我尝试调用 RNTWebView.loadWebsite("http://www.google.com") 时，我收到一条错误消息，提示 RNTWebView.loadWebsite 不是函数。

【参考方案1】：

这是调用原生组件的错误方式。您可以通过本机模块库调用它。

import  NativeModules  from 'react-native';

// ..rest of your code

// The name of your native module is based on the objective c class name. I assume it to be 'RNTWebViewManager'
let RNTWebView = NativeModules.RNTWebViewManager

// call method
RNTWebView.loadWebsite('https://www.google.com');

更多信息，官方文档是here。

【讨论】：

非常感谢！它现在不会抛出错误，但它也不会改变 webview。我像这样导入模块： let RNTWebViewManager = NativeModules.RNTWebViewManager;然后调用该函数，但它与我显示的 webview 是不同的实例吗？

嗨@Asleepace，您需要使用UIManager的UIManager.dispatchViewManagerCommand调用您通过本机UI组件导出的方法