将数据从函数传递到类组件

Question

我已经坚持了几个小时了。

我使用“navigation.navigate('PlayVideo',{streamId: data.stream.hls})}”从另一个页面接收数据到我的 Player.js 中

如果我将它收集到我的函数 VideoControls 中，我可以使用 console.log 记录它的值。但是我无法将其放入类组件 rnvideo 中。 （不知道为什么我在函数中使用它：D）

那么我该怎么做才能将它传递给“uri: `${streamId}”？

我的 Player.js 文件：

import React, { Component } from "react";
import Icon from 'react-native-vector-icons/FontAwesome';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableWithoutFeedback,
  Dimensions,
} from "react-native";

import Video from "react-native-video";
import ProgressBar from "react-native-progress/Bar";
import {useRoute} from '@react-navigation/native';

function VideoControls() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [play, setPlay] = React.useState(true);

  const route = useRoute();

  const streamId = route.params.streamId;
  const TimeIn = route.params.TimeIn;
  console.log(TimeIn) 
}

function secondsToTime(time) {
  return ~~(time / 60) + ":" + (time % 60 < 10 ? "0" : "") + time % 60;
}

export default class rnvideo extends Component {
  state = {
    paused: false,
    progress: 0,
    duration: 0,
  };

  handleMainButtonTouch = () => {
    if (this.state.progress >= 1) {
      this.player.seek(0);
    }

    this.setState(state => {
      return {
        paused: !state.paused,
      };
    });
  };

  handleProgressPress = e => {
    const position = e.nativeEvent.locationX;
    const progress = (position / 250) * this.state.duration;
    const isPlaying = !this.state.paused;
    
    this.player.seek(progress);
  };

  handleProgress = progress => {
    this.setState({
      progress: progress.currentTime / this.state.duration,
    });
  };

  handleEnd = () => {
    this.setState({ paused: true });
  };

  handleLoad = meta => {
    this.setState({
      duration: meta.duration,
    });
  };


  render() {
    const { width } = Dimensions.get("window");
    const height = width * 0.5625;


    return (
      <View style={styles.container}>
        <View>
          
          <Video
            paused={this.state.paused}
            source={{  
              uri: `${streamId}`,
            }} 
            style={{ width: "100%", height }}
            resizeMode="contain"
            onLoad={this.handleLoad}
            onProgress={this.handleProgress}
            onEnd={this.handleEnd}
            ref={ref => {
              this.player = ref;
            }}
          />
          <View style={styles.controls}>
            <TouchableWithoutFeedback onPress={this.handleMainButtonTouch}>
              

              <Icon name={!this.state.paused ? "pause" : "play"} size={25} color="#FFF" />


            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={this.handleProgressPress}>
              <View>
                <ProgressBar
                  progress={this.state.progress}
                  color="#FFF"
                  unfilledColor="rgba(255,255,255,.5)"
                  borderColor="#FFF"
                  width={250}
                  height={20}
                />
              </View>
            </TouchableWithoutFeedback>

            <Text style={styles.duration}>
              {secondsToTime(Math.floor(this.state.progress * this.state.duration))}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 250,
  },
  controls: {
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    height: 48,
    left: 0,
    bottom: 0,
    right: 0,
    position: "absolute",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
    paddingHorizontal: 10,
  },
  mainButton: {
    marginRight: 15,
  },
  duration: {
    color: "#FFF",
    marginLeft: 15,
  },
  black: {
    color: '#000000',
  }
});

AppRegistry.registerComponent("rnvideo", () => rnvideo);