0

我正在关注一些api 文档，其中唯一的代码示例在 vanilla JS 中，但我正在尝试在 React Native 中使用它们。他们提供了功能齐全的React Native 应用程序供参考，但我不知道如何根据我的需要重新调整这些方法的用途。

在 api 文档中，它给出了示例：

ConnectyCube.videochat.onCallListener = function(session, extension) {

  // here show some UI with 2 buttons - accept & reject, and by accept -> run the following code:
  var extension = {};
  session.accept(extension);
};

ConnectyCube是一个模块import，我需要在 React Native 中使用这个特定的方法。在他们作为示例提供的应用程序中，它在类组件中看起来像这样：

class AppRoot extends React.Component {

    componentDidMount() {
        ConnectyCube.init(...config)

        this.setupListeners();
    }

    setupListeners() {
        ConnectyCube.videochat.onCallListener = this.onCallListener.bind(this);
        ConnectyCube.videochat.onUserNotAnswerListener = this.onUserNotAnswerListener.bind(this);
        ConnectyCube.videochat.onAcceptCallListener = this.onAcceptCallListener.bind(this);
        ConnectyCube.videochat.onRemoteStreamListener = this.onRemoteStreamListener.bind(this);
        ConnectyCube.videochat.onRejectCallListener = this.onRejectCallListener.bind(this);
        ConnectyCube.videochat.onStopCallListener = this.onStopCallListener.bind(this);
        ConnectyCube.videochat.onSessionConnectionStateChangedListener = this.onSessionConnectionStateChangedListener.bind(this);
    }

    onCallListener(session, extension) {
        console.log('onCallListener, extension: ', extension);

        const {
            videoSessionObtained,
            setMediaDevices,
            localVideoStreamObtained,
            callInProgress
        } = this.props

        videoSessionObtained(session);

        Alert.alert(
            'Incoming call',
            'from user',
            [
                {text: 'Accept', onPress: () => {
                    console.log('Accepted call request');

                    CallingService.getVideoDevices()
                        .then(setMediaDevices);

                    CallingService.getUserMedia(session).then(stream => {
                        console.log(stream)
                        localVideoStreamObtained(stream);
                        CallingService.acceptCall(session);
                        callInProgress(true);
                    });
                }},
                {
                    text: 'Reject',
                    onPress: () => {
                        console.log('Rejected call request');
                        CallingService.rejectCall(session);
                    },
                    style: 'cancel',
                },
            ],
            {cancelable: false},
        );
    }

    onUserNotAnswerListener(session, userId) {
        CallingService.processOnUserNotAnswer(session, userId);

        this.props.userIsCalling(false);
    }

    onAcceptCallListener(session, userId, extension) {
        CallingService.processOnAcceptCallListener(session, extension);
        this.props.callInProgress(true);
    }

    onRemoteStreamListener(session, userID, remoteStream){
        this.props.remoteVideoStreamObtained(remoteStream, userID);
        this.props.userIsCalling(false);
    }

    onRejectCallListener(session, userId, extension){
        CallingService.processOnRejectCallListener(session, extension);

        this.props.userIsCalling(false);

        this.props.clearVideoSession();
        this.props.clearVideoStreams();
    }

    onStopCallListener(session, userId, extension){
        this.props.userIsCalling(false);
        this.props.callInProgress(false);

        this.props.clearVideoSession();
        this.props.clearVideoStreams();

        CallingService.processOnStopCallListener(session, extension);
    }

    onSessionConnectionStateChangedListener(session, userID, connectionState){
        console.log('onSessionConnectionStateChangedListener', userID, connectionState);
    }

    render() {
        console.log('hey');
        return <AppRouter />
    }
}

function mapDispatchToProps(dispatch) {
    return {
        videoSessionObtained: videoSession => dispatch(videoSessionObtained(videoSession)),
        userIsCalling: isCalling => dispatch(userIsCalling(isCalling)),
        callInProgress: inProgress => dispatch(callInProgress(inProgress)),
        remoteVideoStreamObtained: remoteStream => dispatch(remoteVideoStreamObtained(remoteStream)),
        localVideoStreamObtained: localStream => dispatch(localVideoStreamObtained(localStream)),
        clearVideoSession: () => dispatch(clearVideoSession()),
        clearVideoStreams: () => dispatch(clearVideoStreams()),
        setMediaDevices: mediaDevices => dispatch(setMediaDevices(mediaDevices)),
        setActiveVideoDevice: videoDevice => dispatch(setActiveVideoDevice(videoDevice))
    }
}

export default connect(null, mapDispatchToProps)(AppRoot)

我想设置侦听器，但我没有使用上面调用的组件中的类，也没有使用CallingService相同的 redux 操作 - 我采用的是功能性方法。当我将文档中的代码粘贴到service只是一个普通函数的 a 中时，我收到错误： Cannot set property 'onCallListener' of undefined.

欢迎任何想法！

4

1 回答 1

0 

componentDidMount() {
    document.addEventListener("keyup",this.login,false);
}

 login = (event) => {

      console.log('i have been activated on keyup event from the componentDidMount()');
      
 };

于 2019-08-27T21:05:38.533 回答