未调用 setState 以在单击按钮时覆盖 red5Pro 配置中的一个属性

如何解决未调用 setState 以在单击按钮时覆盖 red5Pro 配置中的一个属性

我正在尝试使用 setState 在单击按钮时调用 Publisher 对象的 onConfigured: 属性。

当我打开开始直播屏幕时，它会从 this.state 加载到配置，但我希望它在单击按钮时手动启动。我尝试了 setState 但当我按下按钮时它没有被调用并且流没有开始

这是代码：-

import React from "react";
import { findNodeHandle,View,Button,StyleSheet } from "react-native";

import { R5VideoView } from "react-native-red5pro";
import { R5LogLevel,R5ScaleMode } from "react-native-red5pro";
import {
  publish,unpublish,swapCamera,subscribe,unsubscribe,} from "react-native-red5pro";

import * as Permissions from "expo-permissions";

export default class StartLiveStream extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      publisher: {
        ref: "video",configuration: {
          host: "100.248.112.52",// IP or Fully Qualified Domain Name
          port: 8554,contextName: "live",bufferTime: 0.5,streamBufferTime: 2,key: Math.floor(Math.random() * 0x10000).toString(16),bundleID: "com.realfreedomplatform.stream",licenseKey: "794H-993S-PXKL-VZBK",streamName: "mystream",},showDebugView: true,logLevel: R5LogLevel.DEBUG,//onConfigured: this.onConfiguredPublish.bind(this),subscriber: {
        ref: "video",configuration: {
          host: "107.172.137.107",licenseKey: "694H-993S-PXKL-VZBK",streamName: "mystream2",//"test123",scaleMode: R5ScaleMode.SCALE_TO_FILL,// onConfigured: this.onConfiguredSubscribe.bind(this),};

    this.onStopPublish = this.onStopPublish.bind(this);
    this.onStopSubscribe = this.onStopSubscribe.bind(this);
    this.onSwapCamera = this.onSwapCamera.bind(this);
    this.onStatechange = this.onStatechange.bind(this);
  }

  async componentDidMount() {
    console.log("loaded publisher");

    try {
      const { status } = await Permissions.askAsync(
        Permissions.CAMERA,Permissions.CAMERA_ROLL,Permissions.AUdio_RECORDING
      );

      if (status !== "granted") {
        return (
          <View>
            <Text>Permission is not granted</Text>
          </View>
        );
      }
    } catch (error) {
      console.log("error in permisions");
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <R5VideoView {...this.state.subscriber} style={styles.video1} />
        <R5VideoView {...this.state.publisher} style={styles.video} />

        <Button
          style={styles.button}
          onPress={this.onStopPublish}
          title="Stop Publish"
          accessibilityLabel="Stop Publish"
        />
        <Button
          style={styles.button}
          onPress={this.onStatechange} // I called it here to start streaming on button click
          title="Start Publish"
          accessibilityLabel="Start Publish"
        />
        <Button
          style={styles.button}
          onPress={this.onSwapCamera}
          title="Swap Camera"
          accessibilityLabel="Swap Camera"
        />
      </View>
    );
  }

  onConfiguredPublish() {
    // By providing the `configuration` state prop to the view,// the component starts the configuration process.

    const streamNamePublish = this.state.publisher.configuration.streamName;
    publish(findNodeHandle(this.refs.video),streamNamePublish);
  }

  onConfiguredSubscribe() {
    const streamNameSubscribe = this.state.subscriber.configuration.streamName;
    subscribe(findNodeHandle(this.refs.video),streamNameSubscribe);
  }

  onStatechange() { // I think I am doing something wrong here
    this.setState((prevstate) => ({

      publisher: Object.assign({},prevstate.publisher,{
        onConfigured: this.onConfiguredPublish.bind(this),}),}));
  }

  onStopSubscribe() {
    unsubscribe(findNodeHandle(this.refs.video));
  }

  onStopPublish() {
    unpublish(findNodeHandle(this.refs.video));
  }

  onSwapCamera() {
    swapCamera(findNodeHandle(this.refs.video));
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: "white",justifyContent: "center",video: {
    flex: 0.5,flexDirection: "row",backgroundColor: "black",video1: {
    flex: 0.5,button: {
    position: "absolute",left: 0,right: 0,bottom: 0,height: 40,backgroundColor: "blue",color: "white",});