2017-10-13 3 views
1

私はWebViewコンポーネントをテストしていますが、レンダリングすることはできません。ここReact Native:Webviewの使い方は?

サンプル:https://snack.expo.io/r1oje4C3-

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.paragraph}> 
      Change code in the editor and watch it change on your phone! 
      Save to get a shareable url. You get a new url each time you save. 
     </Text> 
     <WebView source={{html: '<p>Here I am</p>'}} />   
     <WebView source={{ uri: 'http://www.google.com'}} /> 
     </View> 
    ); 
    } 
} 

万博で上記の例を実行し、2つのWebViewコンポーネントのどちらをレンダリングするように見えます。私は間違って何をしていますか?あなたにも、高さ、スタイルパラメータを提供する必要があります

<WebView 
    source={{uri: 'https://github.com/facebook/react-native'}} 
    style={{width: 300}} 
/> 

注:

答えて

2

あなたがそうのような、幅のスタイルパラメータを提供する必要があるようです。スタイルにflex: 1を追加することもできます。

+1

flex: 1style小道具を追加します。 –

+0

これは変です。私は答えを更新します – Nepho

1

は、私はこれを受け入れるだろうが、私はまた、高さを追加しない限り、それは私のために動作しませんでしたWebView

export default class App extends Component { 
    render() { 
    return (
    <View style={styles.container}> 
     <Text style={styles.paragraph}> 
     Change code in the editor and watch it change on your phone! 
     Save to get a shareable url. You get a new url each time you save. 
     </Text> 
     <WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />   
     <WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} /> 
    </View> 
); 
} 
} 
関連する問題