该return()方法为 Sample App 显示视图。AgoraRendererView是用来显示音频/视频的 UI 元素。示例应用程序创建了两个AgoraRendererView元素，即_localView和_remoteView。

 1return（
 2    <View style = {styles.container}> 
 3    <AgoraRendererView 
 4        ref = {component => this._localView = component} 
 5        style = {{width：360，height：240}} 
 6    /> 
 7
 8    <AgoraRendererView 
 9        ref = {component => this ._remoteView = component} 
10        style = {{width：360，height：240}} 
11    /> 
12
13    ... 
14
15    </ View> 
16）;

然后在return()添加UI按钮元素让用户能够加入频道、离开频道、切换摄像头、切换音频线路。详细代码请见「阅读原文」。

加入频道

使用_joinChannel()方法将用户加入特定频道。

1_joinChannel（）{ 
2    ... 
3}

在_joinChannel()方法中，以下方法执行其他任务：

AgoraRtcEngine.setLocalVideoView() 设置本地视频 view。

Sample App 将本地视频 view 应用于在render()中创建的_localViewUI 元素。

1AgoraRtcEngine.setLocalVideoView（this._localView，AgoraRtcEngine.AgoraVideoRenderModeFit）;

AgoraRtcEngine.setVideoProfile()将视频配置文件设置为默认的 Agora 配置文件，且不更改 orientation 属性。

1AgoraRtcEngine.setVideoProfile（AgoraRtcEngine.AgoraVideoProfileDEFAULT，false）;

AgoraRtcEngine.startPreview()启动 Agora SDK 预览，并让AgoraRtcEngine.joinChannel()加入频道。

1AgoraRtcEngine.startPreview（）; 
2AgoraRtcEngine.joinChannel（null，“rnchannel01”，“React Native for Agora RTC SDK”，0）;

上述代码中joinChannel的参数设置是这样的：

token为null。加入通道后，Agora Engine将设置token为新值。
频道名为rnchannel01
info记录了关于频道的信息“React Native for Agora RTC SDK”
uid 为0，这是通用用户ID值

离开频道

Sample App 应用了_leaveChannel()，会调用 AgoraRtcEngine.stopPreview()和AgoraRtcEngine.leaveChannel()。需要注意的是，_leaveChannel()不会自动停止预览,因此需要先调用stopPreview()。

1_leaveChannel（）{ 
2    AgoraRtcEngine.stopPreview（）; 
3    AgoraRtcEngine.leaveChannel（）; 
4}

切换相机

Sample App 中，我们通过AgoraRtcEngine.switchCamera()切换摄像头。

1switchCamera（）{ 
2    AgoraRtcEngine.switchCamera（）; 
3}

切换 Audio Route

调用AgoraRtcEngine.setEnableSpeakerphone()打开或关闭扬声器。这里需要注意由于isSpeakerPhone用于全局检测用户是否处于扬声器模式，所以在setEnableSpeakerphone后必须更改。

1_switchAudio（）{ 
2    AgoraRtcEngine.setEnableSpeakerphone（isSpeakerPhone）; 
3    isSpeakerPhone =！isSpeakerPhone; 
4}

添加事件监听器

通过agoraKitEmitter.addListener()添加remoteDidJoineChannelNoti事件侦听器来检测远程用户加入频道的动作。

事件监听器的名称是RemoteDidJoinedChannel。触发时，它会执行以下操作：

将远程视频视图添加到_remoteView
为用户应用远程视频视图，notify.uid
保证视频内容全部显示

1remoteDidJoineChannelNoti = agoraKitEmitter.addListener（
2    'RemoteDidJoinedChannel'，
3    （notify）=> { 
4        AgoraRtcEngine.setRemoteVideoView（this._remoteView，notify.uid，AgoraRtcEngine.AgoraVideoRenderModeFit）; 
5    } 
6  ）;

在 React Native 视图移除后，调用remoteDidJoineChannelNoti.remove()来移除事件侦听器。

本文转载自公众号声网Agora（ID：shengwang-agora）。

原文链接：

https://mp.weixin.qq.com/s/uuU0ujJm71yZZW2Vg5Zniw

创作场景

如何在 React Native 中实现视频通话（下）