影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据，本节就不作为详细内容来讲解了，详细的代码可以看下我的github，效果如下：
在点击播放时，会跳转到播放界面，并且横屏显示，退出播放界面时，会恢复到竖屏状态。但是，react native并没有给我们提供设置横竖屏的API，因此，我们需要自己使用原生的代码来完成此功能。
使用原生代码，我们可以为react native作什么呢？
一个是功能性上的（模块），比如提供横竖屏设置、数据库存储等一个是UI层面上的（UI组件），比如可以自定义一个VideoView视频播放器等
就目前项目而言，详情页开发涉及到的两个正好是上面的两种情况，横竖屏设置（功能）和使用原生VideoView播放视频（UI）。
原生模块之横竖屏设置功能开发
在我们项目目录下XiFan/android 存放的是android项目的代码，需要使用Android Studio来开发，如果你不是android开发者，那么你可能需要先搭建android开发环境，这里就不介绍了，可自行网上搜索查阅资料。这里放一个工具下载地址 /
打开android项目之后（打开之后会弹窗提示更改gradle版本，点击忽略即可），目录结构如下：
module是新建的一个包名，专门存放自定义的组件。开发一个功能组件，需要配对实现一个Module和Package。
实现JAVA端模块
在module包下，新建OrientationModule类，并继承ReactContextBaseJavaModule
public class OrientationModule extends ReactContextBaseJavaModule{public OrientationModule(ReactApplicationContext reactContext) {super(reactContext);}@Overridepublic String getName() {return "Orientation";}@Nullable@Overridepublic Map<String, Object> getConstants() {return null;}}
getName方法返回的是该组件的名称（该名称可以加RCT前缀，如RCTOrientation，但JS中调用的还是没有加前缀的Orientation），在JS中供NativeModules使用；getConstants方法返回一组key/value常量属性值，可供JS中调用。具体看实现吧。
首先我们需要提供一个方法，供JS中调用设置应用的横竖屏。要让JS中能调用，需要在方法上使用ReactMethod注解。
@ReactMethodpublic void setOrientation(final int orientation){UiThreadUtil.runOnUiThread(new Runnable() {@Overridepublic void run() {Activity activity = getCurrentActivity();if(activity == null){return;}if(orientation == ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE){activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//设置全屏Window window = activity.getWindow();WindowManager.LayoutParams params = window.getAttributes();params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;window.setAttributes(params);}else if(orientation == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//设置非全屏Window window = activity.getWindow();WindowManager.LayoutParams params = window.getAttributes();params.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);window.setAttributes(params);}}});}
这个方法接收一个orientation参数，只支持ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE和ActivityInfo.SCREEN_ORIENTATION_PORTRAIT常量参数值。由于react native是运行在JavaBridge线程，所以在使用android一些功能时，我们需要将在android UI线程里进行操作，因此这里调用UiThreadUtil.runOnUiThread。
那么，我们如何让使用者更方便的使用setOrientation这个方便，而不用知道orientation参数要传什么具体值呢？
这里我们就需要使用上面提到的getConstants方法来定义常量值了。
private static final String ORIENTATION_LANDSCAPE_KEY = "LANDSCAPE";//横屏private static final String ORIENTATION_PORTRAIT_KEY = "PORTRAIT";//竖屏@Nullable@Overridepublic Map<String, Object> getConstants() {//定义返回值常量Map<String,Object> constants = MapBuilder.newHashMap();constants.put(ORIENTATION_LANDSCAPE_KEY, ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);constants.put(ORIENTATION_PORTRAIT_KEY, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);return constants;}
定义了LANDSCAPE 和 PORTRAIT两个属性常量，并分别赋予值ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE 和 ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
写完了Module，我们需要再写Package。新建OrientationPackage类，并实现ReactPackage接口。
public class OrientationPackage implements ReactPackage{@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {return Arrays.<NativeModule>asList(new OrientationModule(reactContext));}@Overridepublic List<Class<? extends JavaScriptModule>> createJSModules() {return Collections.emptyList();}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}}
OrientationModule是属于NativeModule，所以，我们在createNativeModules方法中返回我们已经实现了的OrientationModule。
最后，我们需要将OrientationPackage注册到react native中，让它能识别到我们的Module。
打开MainApplication类，并将OrientationPackage添加到ReactPackage
public class MainApplication extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@Overrideprotected boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new OrientationPackage());}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}}
在getPackages方法中增加了我们的OrientationPackage。
接下来就是在JS中使用它了。
实现对应的JS模块
新建VideoPlayScene.js，用于播放视频的场景。我们需要在应用进入该页面时，横屏显示，退出时恢复竖屏。
import React,{Component} from 'react';import {View,WebView,NativeModules} from 'react-native';var Orientation = NativeModules.Orientation;export default class VideoPlayScene extends Component{constructor(props){super(props);}componentWillMount(){Orientation.setOrientation(Orientation.LANDSCAPE);}componentWillUnmount(){Orientation.setOrientation(Orientation.PORTRAIT);}}
我们需要import NativeModules这个模块
var Orientation = NativeModules.Orientation;
NativeModules点后面的Orientation就是我们在原生代码OrientationModule中getName返回的字符串值。
在componentWillMount 和 componentWillUnmount生命周期中调用setOrientation来实现需求。其中Orientation.LANDSCAPE 和 Orientation.PORTRAIT 就是我们在OrientationModule$getConstants 定义的两个常量值。
那如果在js中需要接收一个回调方法，那么原生代码需要怎么写呢？
在OrientationModule在定义一个方法，并接收一个Callback参数
@ReactMethodpublic void getRequestedOrientation(Callback callback){int orientation = getReactApplicationContext().getResources().getConfiguration().orientation;callback.invoke(orientation);}
js中调用
componentWillMount(){Orientation.getRequestedOrientation((orientation)=>{console.log('current orientation :'+ orientation);});//Orientation.setOrientation(Orientation.LANDSCAPE);}
这样就完成了横竖屏功能的开发了（不好的是，自定义的Module在IDE下并不能代码提示，有知道如何让它提示的话，请告知一下哈），贴下OrientationModule.java的完整代码
public class OrientationModule extends ReactContextBaseJavaModule{private static final String ORIENTATION_LANDSCAPE_KEY = "LANDSCAPE";//横屏private static final String ORIENTATION_PORTRAIT_KEY = "PORTRAIT";//竖屏public OrientationModule(ReactApplicationContext reactContext) {super(reactContext);}@Overridepublic String getName() {return "Orientation";}@Nullable@Overridepublic Map<String, Object> getConstants() {//定义返回值Map<String,Object> constants = MapBuilder.newHashMap();constants.put(ORIENTATION_LANDSCAPE_KEY, ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);constants.put(ORIENTATION_PORTRAIT_KEY, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);constants.put("initOrientation",getReactApplicationContext().getResources().getConfiguration().orientation);return constants;}@ReactMethodpublic void setOrientation(final int orientation){UiThreadUtil.runOnUiThread(new Runnable() {@Overridepublic void run() {Activity activity = getCurrentActivity();if(activity == null){return;}if(orientation == ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE){activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//设置全屏Window window = activity.getWindow();WindowManager.LayoutParams params = window.getAttributes();params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;window.setAttributes(params);}else if(orientation == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//设置非全屏Window window = activity.getWindow();WindowManager.LayoutParams params = window.getAttributes();params.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);window.setAttributes(params);}}});}@ReactMethodpublic void getRequestedOrientation(Callback callback){int orientation = getReactApplicationContext().getResources().getConfiguration().orientation;callback.invoke(orientation);}}
总结
本节我们完成了android的自定义模块，使RN能够使用原生提供的能力。而关于js如何向native发送命令以及native如何向js发送事件的问题，原生模块和原生UI组件它们的通信都是一样的，所以我们把这个问题留在下一节来讲述。
