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

问题描述

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

我使用“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,.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.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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）