React Native поток демонстрации экрана для увеличения с помощью open tok - PullRequest
Новая
       54

React Native поток демонстрации экрана для увеличения с помощью open tok

0 голосов
/ 01 августа 2020

Я использую функциональные компоненты в react-native, где я использую opentok для видеозвонков и демонстрации экрана.

Для меня представление совместного использования экрана увеличивается, как и изображение, которое я прикрепил. Также я даю подписчику полную ширину и высоту экрана; Я не понимаю, почему это происходит.

Пожалуйста, нажмите на изображение, которое приближается вот так

View.tsx 

<View style={videoScreenStyles.oTSubscriberStyles}>
            <OTSession apiKey={OPENTOKAPI_KEY} sessionId={currentSelectedSchedule.sessionId}
                       token={currentSelectedSchedule.token} eventHandlers={sessionEventHandlers} ref={otSessionRef}>
                {videoCallConnected ? <OTPublisher properties={publisherProperties}
                                                   style={videoScreenStyles.oTPublisherStyles}
                /> : null}
                {loading ? <View style={videoScreenStyles.centered}>
                    <ActivityIndicator size="large" color={primaryColor}/>
                    <Text style={videoScreenStyles.texTherapist}>Please wait still therapist join the call</Text>
                    <Button
                        ViewComponent={LinearGradient}
                        onPress={() => cancelHandler()}
                        linearGradientProps={{
                            colors: [primaryColor, secondaryColor],
                            start: {x: 0.5, y: 0},
                            end: {x: 0.5, y: 1},
                        }}
                        buttonStyle={{height: 30, width: 70, borderRadius: 15}}
                        title={appointmentCancel}
                        titleStyle={{fontSize: 12, marginTop: 0, paddingTop: 0, fontWeight: 'bold'}}
                    />
                </View> : null}
                <OTSubscriber
                    style={videoScreenStyles.oTSubscriberStyles}
                    properties={subscriberProperties}
                />
            </OTSession>
            {loading ? null : <View style={videoScreenStyles.bottomBar}>
                <TouchableWithoutFeedback onPress={endCallHandler}>
                    <Image source={require('./../../assets/video/endcall_icn.png')}/>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={micHandler}>
                    <Image
                        source={!mic ? require('./../../assets/video/micicn_mute.png') : require('./../../assets/video/mic_icn.png')}/>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={videoHandler}>
                    <Image
                        source={!video ? require('./../../assets/video/videoicn_off.png') : require('./../../assets/video/video_icn.png')}/>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={rotatoHandler}>
                    <Image style={videoScreenStyles.videoCallImage}
                           source={rotato == 'front' ? require('./../../assets/video/front_rotate.png') : require('./../../assets/video/back_rotate.png')}/>
                </TouchableWithoutFeedback>
            </View>}
        </View>

styles.tsx 

import {
    StyleSheet, Dimensions, Platform
} from 'react-native';

const { width, height } = Dimensions.get('screen');

const videoScreenStyles = StyleSheet.create({
    container: {
        flex: 1,
    },
    oTPublisherStyles: {
        position: 'absolute',
        zIndex: 999,
        width: 150,
        height: 200,
        right: 10,
        top: Platform.OS === 'ios' ? 40 : 10,
    },
    oTSubscriberStyles: {
        position: 'absolute',
        width: width,
        height: height,
        resizeMode:'contain',
    },
    bottomBar: {
        position: 'absolute',
        flexDirection: 'row',
        bottom: 50,
        backgroundColor: '#0C233C50',
        justifyContent: 'space-between',
        right: 10,
        left: 10,
        padding: 12,
        borderRadius: 20,
        borderColor: '#707070'
    },
    timerBar: {
        position: 'absolute',
        top: 50,
        backgroundColor: '#0C233C50',
        right: 10,
        left: 10,
        padding: 12,
        borderRadius: 20,
        borderColor: '#707070'
    },
    centered: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'column'
    },
    texTherapist:{
        marginTop:20,
        marginLeft:20,
        marginRight:20,
        fontFamily:Platform.OS === 'ios' ? 'SF Mono' : 'sfmono',
        textAlign:'center'
    },
    videoCallImage:{
        width:48,
        height:48
    }

});

export default videoScreenStyles;
...