質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

3174閲覧

ReactアプリのWebView表示について

kamereon

総合スコア6

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/08/03 11:58

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問