Question

我正在关注一些api docs，其中唯一的代码示例在原始JS中，但是我试图在React Native中使用它们。它们提供了功能全面的React Native apps供参考，但我不知道如何根据我的需要重新调整方法的用途。

在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中时，出现错误： Cannot set property 'onCallListener' of undefined。

欢迎提出任何想法！

Answer 1

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

 login = (event) => {

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

侦听器函数的香草JS与React类绑定

1 个答案: