Использование WebView в реакции нативного

Question

Я хочу использовать WebView для отображения списка воспроизведения YouTube при каждом нажатии на изображение. Но мне не удается отобразить WebView, только пустую белую страницу. Вот код:

showBelier(){
   this.setState({ishowing:true});
    return(
       <WebView
       javaScriptEnabled={true}
       domStorageEnabled={true}
       source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
     />
)}

<View style = {{flexDirection: 'row', justifyContent:'space-between', position:'relative'}}>
    <TouchableOpacity onPressIn={() => this.setState({belier: !this.state.belier})} onPress={()=> this.showBelier()}>
       <Image style = {styles.image} source={ this.state.belier === true ? require("../Images/couleurs/icons8-belier-100.png")
            : require("../Images/gris/beliergris.png")}/>
    </TouchableOpacity>
</View>

Заранее спасибо!

Answer 1

Если у вас есть метод рендеринга, такой как showBelier, внутри другой функции элемента, он не будет виден. Пожалуйста, включите метод внутри вашего рендера следующим образом:

<View>
    <TouchableOpacity onPress={() => this.setState({belier: !this.state.belier})}}>
    ....
    </TouchableOpacity>
    {this.showBelier()}
</View>

И настройте свой метод следующим образом:

showBelier(){
   if(this.state.belier) {
     return(
       <WebView
       javaScriptEnabled={true}
       domStorageEnabled={true}
       source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
     />
  )}
}