Question

我正在尝试加载相关的视频react-native-youtube独立播放器，具体取决于将哪些参数传递给该组件。

在首次加载时效果很好，但是当我单击“后退”按钮并使用react-navigation和其他id导航回到该页面时，视频是相同的-如何更改新道具的玩家：

   <Text
      onPress={() => {
        NavigationService.navigate("VideoPlayer", { id });
      }}
      style={styles.text}
    >

我的视频播放器组件：

 class VideoPlayer extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { id: propId } = NavigationService.getParams();
    const { videos } = this.props;

    // videos is array of objects
    let videoProps = videos.find(obj => obj.id == propId);

    let { id, icon, title, description, youtubeVideo, preview } = videoProps;
    const url = `https://img.youtube.com/vi/${youtubeVideo}/0.jpg`;

    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() =>
            YouTubeStandaloneAndroid.playVideo({
              apiKey: "AIzaSyBXX5qe0B2hb1HzvIvExJZbqspeG9dg0Dk",
              videoId: youtubeVideo,
              autoplay: true,
              lightboxMode: true,
              startTime: 124.5
            })
              .then(() => console.log("Android Standalone Player Finished"))
              .catch(errorMessage => console.log(errorMessage))
          }
        >
          <Image style={styles.image} source={{ uri: url }} />
        </TouchableOpacity>
        <Text>{description}</Text>
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    videos: state.videos
  };
};

Answer 1

您可以尝试将navigate替换为push操作。区别在于，一旦一次访问了堆栈中的路由，导航将带您到该路由而无需再次安装。使用push，您可以使用不同的参数多次安装同一条路由。这是来自官方文档的更多信息： https://reactnavigation.org/docs/en/stack-actions.html#push

导航回组件，无法刷新状态

1 个答案: