掌田津耶野著 ReactNative入門でYahoo!ニュースチェッカーを写経したのですが、
ニュース記事詳細の部分でWebViewのところでエラーが出て先に進めません。

エラー

↓

試したこと

どうやらバージョンアップでWebViewはreact-nativeではなくreact-native-webviewからインポートするとエラーで出ていたので、そうしたところ画面すら表示されなくなりました。

js
1- import { StyleSheet,  ScrollView, WebView, StatusBar, Alert, TouchableOpacity, Text, View } from 'react-native';
2+ import { StyleSheet,  ScrollView, StatusBar, Alert, TouchableOpacity, Text, View } from 'react-native';
3
4+ import { WebView } from 'react-native-webview'; // 追加

書籍コード全文

js
1import React, { Component } from 'react';
2import { StyleSheet,  ScrollView, WebView, StatusBar, Alert, TouchableOpacity, Text, View } from 'react-native';
3import { Header } from 'react-native-elements';
4import { createStackNavigator } from 'react-navigation';
5
6window.DOMParser = require('xmldom').DOMParser;
7
8// RSS名
9const site_items = ['主なニュース','国際ニュース','国内ニュース','経済関係','スポーツ','IT関連','科学技術'];
10
11// RSSアドレス
12const site_links = [
13  'https://news.yahoo.co.jp/pickup/rss.xml',
14  'https://news.yahoo.co.jp/pickup/world/rss.xml',
15  'https://news.yahoo.co.jp/pickup/domestic/rss.xml',
16  'https://news.yahoo.co.jp/pickup/economy/rss.xml',
17  'https://news.yahoo.co.jp/pickup/sports/rss.xml',
18  'https://news.yahoo.co.jp/pickup/computer/rss.xml',
19  'https://news.yahoo.co.jp/pickup/science/rss.xml'
20];
21
22let sel_index = 0; // 選択index
23let access_url = ''; // 選択url
24
25// サイトの一覧画面
26class Home extends React.Component {
27  static navigationOptions = {
28    title: 'Yahoo News',
29    headerStyle: { backgroundColor: '#4169e1', },
30    headerTintColor: 'white',
31  }
32  constructor(props) {
33    super(props);
34  }
35  getView = (item, i) => (
36    <TouchableOpacity onPress={ () => this.goNews(i) }>
37      <View style={ styles.site }>
38        <Text
39          style={{ fontSize:32 }}>
40          { i+1 }. { item }
41        </Text>
42      </View>
43    </TouchableOpacity>
44  );
45  goNews = (n) => {
46    sel_index = n;
47    this.props.navigation.navigate('Genre');
48  }
49  render() {
50    return (
51      <View style={ styles.base }>
52        <View style={ styles.body }>
53          <ScrollView>
54            { site_items.map((item, i) => this.getView(item, i)) }
55          </ScrollView>
56        </View>
57      </View>
58    );
59  }
60}
61
62// 選択したサイトのニュース一覧画面
63class Genre extends React.Component {
64  items = [];
65
66  static navigationOptions = {
67    title: site_items[sel_index],
68    headerStyle: { backgroundColor: '#00aa00' },
69    headerTintColor: 'white',
70  }
71  constructor(props) {
72    super(props);
73    this.state = {
74      items: [{ title: 'wait...', link: '', pubDate: '' }],
75    }
76
77    let items = [];
78
79    fetch(site_links[sel_index]).then((response) => {
80      response.text().then((txt) => {
81        const parser = new DOMParser();
82        const xml = parser.parseFromString(txt);
83        let maintitle = xml.getElementsByTagName('title')[0].childNodes[0].nodeValue;
84        let elements = xml.getElementsByTagName('item');
85        for(let i = 0;i < elements.length;i++) {
86          let item = elements[i];
87          let title = item.getElementsByTagName('title')[0].childNodes[0].nodeValue;
88          let link = item.getElementsByTagName('link')[0].childNodes[0].nodeValue;
89          let pubDate = item.getElementsByTagName('pubDate')[0].childNodes[0].nodeValue;
90          items[i] = {
91            title: title,
92            link: link,
93            pubDate: pubDate,
94          }
95        }
96        this.setState({ items: items });
97      });
98    });
99  }
100  getView = (item, i) => (
101    <TouchableOpacity onPress={ () => this.goContent(i) }>
102      <View style={ styles.item }>
103        <Text style={{ fontSize: 24 }}>{ item.title }</Text>
104        <Text style={{ fontSize: 16 }}>{ item.pubDate }</Text>
105      </View>
106    </TouchableOpacity>
107  );
108  goContent = (n) => {
109    access_url = this.state.items[n].link;
110    this.props.navigation.navigate('Content');
111  }
112  render() {
113    return (
114      <View style={ styles.base }>
115        <View style={ styles.body }>
116          <ScrollView>
117            { this.state.items.map((item, i) => this.getView(item, i)) }
118          </ScrollView>
119        </View>
120      </View>
121    );
122  }
123}
124
125// 選択したニュースのWebページを表示する画面
126class Content extends React.Component {
127  static navigationOptions = {
128    title: '選択コンテンツの内容',
129    headerStyle: { backgroundColor: '#aa0000' },
130    headerTintColor: 'white',
131  }
132  constructor(props) {
133    super(props);
134    this.state = { html: '' };
135    fetch(access_url).then((response) => {
136      response.text().then((txt) => {
137        let re = /<a class="newsLink" href="([\w-?:./=]+)"/;
138        let arr = txt.match(re);
139        this.setState({ html: arr[1] });
140      });
141    });
142  }
143  render() {
144    return(
145      <View style={ styles.base }>
146        <View style={ styles.body }>
147          <WebView
148            source={{ uri: this.state.html }}
149            javaScriptEnabled={ true }
150          />
151        </View>
152      </View>
153    );
154  }
155}
156
157// ナビゲーション
158export default createStackNavigator(
159  {
160    Home: { screen: Home },
161    Genre: { screen: Genre },
162    Content: { screen: Content },
163  },
164  {
165    initialRouteName: 'Home',
166  }
167);
168
169const styles = StyleSheet.create ({
170  base: {
171    padding: 0,
172    flex: 1,
173    backgroundColor: '#ddd',
174  },
175  body: {
176    padding: 10,
177    flex: 1,
178    backgroundColor: '#fff',
179  },
180  site: {
181    margin: 5,
182    padding: 10,
183    backgroundColor: '#ddd',
184  },
185  item: {
186    margin: 5,
187    padding: 10,
188    backgroundColor: '#dfd',
189  },
190});