TouchableHighlight в реакции на родную не работает

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.

Тем не менее, вы не должны использовать лямбды в рендере (() => ...), так как это потенциальная проблема производительности.

Правильный способ сделать это - вернуть компонент. Например, <VideoItem key={item.contentDetails.videoId} onPressCallback={this.displayVideo}/>

, а затем вы можете разрешить идентификатор внутри компонента и отправить его обратно в качестве параметра с помощью функции обратного вызова.

Таким образом, вы пропускаете лямбды рендера, а также получаете более четкие и составные коды для других вещей.

Кроме того, нет необходимости оборачивать все внутри в другую View попытку без нее и добавлять стили непосредственно к TouchableHighlight.