#React-nativeでのサイトの実機表示
・現在軽い練習として、React-nativeを用いた簡単なブラウザアプリ(webview)を作成しています。
しかし、Googleや他のサイトは表示されますが、特定のサイトのみスキップ処理されて、表示されずに白画面になります。
※アドレスはhttpsであり、そのサイトはパソコン上や実機のGoogleChromeではきちんと表示されます。
これはサイトのSSLに不備があるということでしょうか?
わかる方、教えてください。
下記のコードのsource={{uri: 'https://www.google.co.jp/'}}
でサイト指定を行っています。
lang
1/** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * @flow 5 */ 6const WEBVIEW_REF = "WEBVIEW_REF"; 7import React, { Component } from 'react'; 8import { WebView } from 'react-native'; 9import { 10 AppRegistry, 11 Platform, 12 StyleSheet, 13 Text, 14 View, 15 Button, 16 Image 17} from 'react-native'; 18const instructions = Platform.select({ 19 ios: 'Press Cmd+R to reload,\n' + 20 'Cmd+D or shake for dev menu', 21 android: 'Double tap R on your keyboard to reload,\n' + 22 'Shake or press menu button for dev menu' 23}); 24export default class App extends Component { 25constructor(props) { 26 super(props); 27 this.state = { 28 canGoBack: false, 29 canGoForward: false, 30 loading: false 31 }; 32 } 33 render() { 34 return ( 35<View style={{flex: 1}}> 36<View style={{backgroundColor: '#FE9A2E',flex: 0.15}}> 37<Image source={require('./header.png')} 38 style={{alignSelf: 'center'}} 39/> 40</View> 41<View style={{flex: 0.8}}> 42<WebView 43ref={WEBVIEW_REF} 44source={{uri: 'https://www.google.co.jp/'}} 45onNavigationStateChange= 46 {this.onNavigationStateChange.bind(this)} 47/> 48</View> 49<View style={{alignSelf: 'center',flex: 0.08,flexDirection: 'row'}}> 50<View style={styles.buttonContainer}> 51<Button 52onPress={this.onBack.bind(this)} 53 title="←" 54 color="#FE9A2E" 55 /> 56 </View> 57<View style={styles.buttonContainer}> 58 <Button 59 onPress={this.onReload.bind(this)} 60 title="↺" 61 color="#FE9A2E" 62 /> 63 </View> 64<View style={styles.buttonContainer}> 65 <Button 66 onPress={this.onForward.bind(this)} 67 title="→" 68 color="#FE9A2E" 69 /> 70 </View> 71</View> 72 </View> 73 ); 74 } 75 onBack() { 76 this.refs[WEBVIEW_REF].goBack(); 77 } 78 79 onForward() { 80 this.refs[WEBVIEW_REF].goForward(); 81 } 82 83 onReload(){ 84 this.refs[WEBVIEW_REF].reload(); 85 } 86 87 onNavigationStateChange(navState) { 88 this.setState({ 89 canGoBack: navState.canGoBack, 90 canGoForward: navState.canGoForward, 91 loading: navState.loading 92 }); 93 } 94} 95const styles = StyleSheet.create({ 96 container: { 97 flex: 1, 98 justifyContent: 'center', 99 alignItems: 'center' 100 }, 101 welcome: { 102 fontSize: 20, 103 textAlign: 'center', 104 margin: 10 105 }, 106 instructions: { 107 textAlign: 'center', 108 color: '#333333', 109 marginBottom: 5 110 }, 111 buttonContainer: { 112 width: 100, 113 margin: 6 114 } 115}); 116AppRegistry.registerComponent('App', () => App);
あなたの回答
tips
プレビュー