2017-06-21 13 views
1

私は自分のカスタムUIコンポーネントをobjective-Cでネイティブに作成していますが、これまでのところ、すべてのメソッドが呼び出せないことがあります。私はRNTWebView.loadWebsite( "http://www.google.com")を呼び出してしようとしたとき、私はRNTWebView.loadWebsiteではないというエラーを取得しネイティブUIコンポーネントのメソッドに反して

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); 

:これはここに私のObjective-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のコードを対応しています機能。

答えて

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です。

+0

ありがとうございます!これでエラーは発生しませんが、webviewは変更されません。私はこのようなモジュールをインポートします:let RNTWebViewManager = NativeModules.RNTWebViewManager;関数を呼び出すのですが、表示しているwebviewとは別のインスタンスですか? – Asleepace

+0

実際にお待ちしております、ありがとうございました! – Asleepace

関連する問題