2017-10-13 91 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> 
    ); 
    } 
} 

運行在世博上面的例子時,兩個都不選的WebView組件似乎呈現。我究竟做錯了什麼?

回答

2

看來你需要提供一個寬度style參數,像這樣:

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

請注意,您可能必須提供一個高度風格參數爲好。您也可以將flex: 1添加到樣式中。

+1

我會接受這個加style道具與flex: 1,但除非我加高度也並沒有爲我工作。 –

+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> 
); 
} 
} 
相關問題