时间戳

首页 > 解决方案 > 在本机反应中使用 WebView

react-native - 在本机反应中使用 WebView

问题描述

每当我单击图像时，我都想使用 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>

提前致谢 ！

标签： react-nativereact-native-webview

解决方案

如果您在元素的另一个函数内部有一个渲染方法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" }}
     />
  )}
}

推荐阅读