Question

嗨，我的<TouchableHighlight>有问题。关键是OnPress方法不仅在Android上不起作用，而在iOS上很好用。

以下是带有TouchableHighlight的代码：

<View>
  {
   this.state.dataVideos.map((item,i) => 
     <TouchableHighlight
       key = {item.contentDetails.videoId}
       onPress = {()=> this.displayVideo(item.contentDetails.videoId)}>
       <View style = {styles.vids}>
          <Image
            source = {{uri: item.snippet.thumbnails.medium.url}}
            style = {{flex: 2, height: '100%', backgroundColor:'#fff', resizeMode:'contain'}}/>
            <Text style = {styles.vidText}>{item.snippet.title}</Text>
       </View>
     </TouchableHighlight>
   )}
</View>

编辑：displayVideo代码：

  displayVideo(videoId){
      if(this.state.selectedIndex == 0){
        this.setState({
          videoUrl: `https://www.youtube.com/embed/${videoId}`,
          showVideo: true
        });
        } else if(this.state.selectedIndex == 1){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        } else if(this.state.selectedIndex == 2){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
          } else if(this.state.selectedIndex == 3){
            this.setState({
              videoUrl: `https://www.youtube.com/embed/${videoId}`,
              showVideo: true
            });
        }else if(this.state.selectedIndex == 4){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }
        else if(this.state.selectedIndex ==5 ){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }
        else if(this.state.selectedIndex == 6){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }
        else if(this.state.selectedIndex == 7){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }
        else if(this.state.selectedIndex == 8){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }
        else if(this.state.selectedIndex == 9){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }
        else if(this.state.selectedIndex == 10){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }

        else if(this.state.selectedIndex == 11){
          this.setState({
            videoUrl: `https://www.youtube.com/embed/${videoId}`,
            showVideo: true
          });
        }

}

Answer 1

这应该可以正常工作，请尝试再次测试，也许可以在displayVideo方法中使用一些控制台日志。

也就是说，您不应该在渲染（() => ...）中使用lambda，因为这是潜在的性能问题。

执行此操作的正确方法是返回组件。例如<VideoItem key={item.contentDetails.videoId} onPressCallback={this.displayVideo}/>

，然后您可以解析组件内部的id并使用回调函数将其作为参数发送回。

这样，您可以跳过渲染lambda，并且还提供了更清晰，更组件化的代码，以供以后使用。

此外，没有必要将所有内容包装在另一个View中，而无需尝试将其直接添加到TouchableHighlight中。

反应本机中的TouchableHighlight无法正常工作

1 个答案: