React NativeのWebViewで通信エラー

Question

React Nativeは全くの初心者です。
WebViewを使っていわゆるガワネイティブを作ろうとしています。
Webサイトを読み込む際、通信エラー等を拾ってエラーを出そうとしていますが、
下記コードだと通信エラーでなくてもエラーのアラートが出てしまいます。
エラーの場合のみアラートを出したいのですが、原因がわかりますでしょうか。

該当のソースコード

import React, {Component} from 'react';
import { Platform, StyleSheet, Text, View, Alert, ActivityIndicator, BackHandler, Linking } from 'react-native';
import { WebView } from 'react-native';
import { withSafeArea } from 'react-native-safe-area';

type Props = {};
const SafeAreaView = withSafeArea(View, 'margin', 'all')
export default class App extends Component<Props> {

  constructor() {
      super();
  }

  render() {
    return (
        <SafeAreaView style={styles.container}>
          <WebView
            source={{uri: 'https://google.co.jp'}}
            onMessage={(event) => Linking.openURL( event.nativeEvent.data )}
            onError={Alert.alert('通信エラーです。')}
            style={styles.content}
          />
        </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
})

バージョン

react-native-cli: 2.0.1
react-native: 0.57.3

Answer 1

onError に function を渡すと直ると思います。

修正例

• 誤: onError={Alert.alert('通信エラーです。')}
• 正: onError={() => Alert.alert('通信エラーです。')}

Comments

[pdj_kt]

無事解決しました！ありがとうございます！
react nativeの基礎がわかっておらず色々と苦戦しています。

[set0gut1]

おめでとうございます！