我正在研究原生视频会议模块。我在右下方的小屏幕上显示远程视频全屏和自拍视频的完整视图,样式是,
remoteView: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
alignSelf:'center',
width: width,
height: height,
},
selfView: {
width:width*.2,
height:height*.2,
right: 5,
bottom: 5,
position: 'absolute',
},
我的代码,
return (
<View style={styles.mainContainer}>
{
mapHash(this.state.remoteList, function(remote, index)
return (<RTCView key={remoteIndex} streamURL={remoteStreamURL} style={styles.remoteView} />);
})
}
<RTCView streamURL={this.state.selfViewSrc} style={styles.selfView}/>
<TouchableHighlight
style={styles.otherScreen}
onPress={this._openOtherScreen}>
{
(Platform.OS === 'android')
?
<Image style={styles.iconnav} source= require('./img/imageP.png')}/>
:
<Image style={styles.iconnav} source= require('image!imageP')}/>
}
</TouchableHighlight>
<TouchableHighlight
style={styles.quit}
onPress={ () => this.closeEvent()
}>
{
(Platform.OS === 'android') ?
<Image
style={styles.iconnav}
source={require('./img/exit.png')}/>
:
<Image
style={styles.iconnav}
source={require('image!exit')} />
}
</TouchableHighlight>
</View>
);
我的mainContainer风格是,
mainContainer: {
flex:1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf : 'stretch',
right: 0,
bottom: 0,
top:0,
left:0,
position: 'absolute',
backgroundColor:'#424242',
},
现在的情况是,当我打开其他屏幕并返回视频视图屏幕,然后我的远程视图正确显示我,但我的自我视频视图没有显示。但是图标显示正确的位置(注意:我在iOS
设备中运行相同的代码,但它不能在android
中运行。我运行一个测试用例我制作了一小段远程视频并再次运行我的应用程序,当我回来其他屏幕我的自我视频显示其位置。这意味着在完整的远程视频中它还会显示自动视频视图,然后返回到远程视频。如何把我自己的视频带到前面。