2017.11.22日修改：
我在项目里面使用的推流地址已经过期了，各位如果想看效果的话需要自己去百度直播平台申请新的推流地址，然后百度的LSS开发者平台会有对应的播放地址，在网页上可以看到是否推流成功，若成功，再将我项目里原来的播放地址改成你自己的就可以了。

下图为工程目录设计结构：

由图可视，iOS与安卓采用完全相同的目录，这也说明了从页面的层次上来看，无论是什么平台，如果用JS实现页面的设计，那就可以设计成完全一样的结构。

一：界面布局

1.设置页：推流地址URL输入框与推流的视频格式的按钮，输入了URL选择了推流的视频清晰度与视频的方向后点击“我要直播”即可进入推流端。若要看直播，则直接点击“我要看直播”，为方便起见，看直播的地址直接写在了代码中，为例子推流地址对应的观看地址，若要使用自己的直播推流地址，则需在代码中对应的修改播放地址。
2.推流页：左上角有一返回按钮，三个视频功能按钮与一个开始录制的推流按钮。左下角为聊天室对话框，由于为直播端，所以未设计输入框。
3.播放页：同样的左上角有一返回按钮，左下角为聊天室对话框与消息输入框。

二：整体UI层次结构

iOS示例：

安卓示例：

由编译器提供的层次结构图可清晰地看出，在iOS端视频录制由GPUImageView完成，这是被封装到百度LSS SDK中的，外部提供的接口为VCPreviewView（即图iOS推流层结构2中黑色的那层），我将其放在自己的View中并封装成component，以便在RN层调用这个原生的View，比较重要的一点是RN编写的其余component都是加在我原生封装的View之上的，这样就保证了层级结构的清晰。同理在安卓端由surfaceView来实现视频的渲染等工作，设计原理跟iOS相同，如上图android推流层结构所示。