反応するネイティブのビデオ会議モジュールに取り組んでいます。右下の小さな画面にリモート ビデオのフル スクリーンとセルフ ビデオの完全なビューを表示しています。スタイルは、
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
)。私は1つのテストケースを実行し、リモートビデオの小さなフレームを作成し、その位置に自分のビデオが表示されている他の画面に戻ったときにアプリケーションを再度実行します。つまり、完全なリモート ビデオでも表示されますが、セルフ ビデオ ビューはリモート ビデオに戻ります。自分のビデオを前面に出す方法。