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

【问题标题】：Navigate back to component, cannot refresh state导航回组件，无法刷新状态
【发布时间】：2019-06-05 13:19:43
【问题描述】：

我正在尝试加载相关视频react-native-youtubestandaloneplayer，具体取决于传递给组件的参数。

它在第一次加载时运行良好，但是当我单击返回按钮并使用 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
  };
};

【问题讨论】：

标签： javascript react-native react-redux react-navigation

【解决方案1】：

您可以尝试将navigate 替换为push 操作。不同之处在于，一旦访问堆栈中的路线一次，navigation 将带您到它而无需再次安装它。通过 push，您可以使用不同的参数多次安装相同的路由。以下是来自官方文档的更多信息： https://reactnavigation.org/docs/en/stack-actions.html#push

【讨论】：