weixin_33721344
weixin_33721344

React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

  2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  11232 views
 

尊重版权,未经授权不得转载

本文来自:画虎烂的专栏(http://blog.csdn.net/it_talk/article/details/52638456)

(一)原生UI组件之VideoView视频播放器开发

React Native并没有给我们提供VideoView这个组件，那我们要播放视频的话，有两种方法：一种是借助WebView，一种就是使用原生的播放器。这里我们就介绍下，如何使用原生VideoView，封装成一个组件，提供给JS使用。

刚创建的React Native交流九群:536404410,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)实现Java端组件

开发View组件，需要Manager和Package。新建VideoViewManager类，并继承SimpleViewManager，SimpleViewManager类需要传入一个泛型，该泛型继承Android的View，也就是说该泛型是要使用android 平台的哪个View就传入该View，比如，我要使用android的VideoView，这个泛型就传入VideoView。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
public class VideoViewManager extends SimpleViewManager{
 
     @Override
     public String getName() { //组件名称
         return "VideoView" ;
     }
 
     @Override
     protected VideoView createViewInstance(ThemedReactContext reactContext) {
         VideoView video = new VideoView(reactContext);
         return video;
     }
}

getName返回组件名称（可以加前缀RCT），createViewInstance方法返回实例对象，可以在初始化对象时设置一些属性。

接着，我们需要让该组件提供视频的url地址。

我们可以通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法。该方法有两个参数，第一个参数是泛型View的实例对象，第二个参数是要设置的属性值。方法的返回值类型必须为void，而且访问控制必须被声明为public。组件的每一个属性的设置都会调用Java层被对应ReactProp注解的方法。 如下给VideoView提供source的属性设置：

?
1
2
3
4
5
6
7
@ReactProp(name = "source" )
public void setSource(RCTVideoView videoView,@Nullable String source){
     if (source != null ){
         videoView.setVideoURI(Uri.parse(source));
         videoView.start();
     }
}

@ReactProp注解必须包含一个字符串类型的参数name。这个参数指定了对应属性在JavaScript端的名字。那么现在JS端可以这么设置source属性值

?
1
'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4' />

但是在设置播放地址的时候，我们可能需要同时设置header（为什么不能像上面source一样来提供一个方法setHeader呢？思考一下），现在改造一下setSource方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@ReactProp(name = "source" )
public void setSource(VideoView videoView,@Nullable ReadableMap source){
     if (source != null ){
         if (source.hasKey( "url" )) {
             String url = source.getString( "url" );
             FLog.e(VideoViewManager.class, "url = " +url);
             HashMap headerMap = new HashMap<>();
             if (source.hasKey( "headers" )) {
                 ReadableMap headers = source.getMap( "headers" );
                 ReadableMapKeySetIterator iter = headers.keySetIterator();
                 while (iter.hasNextKey()) {
                     String key = iter.nextKey();
                     String value = headers.getString(key);
                     FLog.e(VideoViewManager.class,key+ " = " +value);
                     headerMap.put(key,value);
                 }
             }
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                 videoView.setVideoURI(Uri.parse(url),headerMap);
             } else {
                 try {
                     Method setVideoURIMethod = videoView.getClass().getMethod( "setVideoURI" , Uri.class, Map.class);
                     setVideoURIMethod.invoke(videoView, Uri.parse(url), headerMap);
                 } catch (Exception e) {
                     e.printStackTrace();
                 }
             }
             videoView.start();
         }
     }
}

setSource的第二个参数变为ReadableMap，这是一个键值对类型的，用于JS传递参数给JAVA。url必修要有，headers不一定有，现在JS端可能变这样：

?
1
2
3
4
5
6
7
8
9
10
     source={
         {
             url: 'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4' ,
             headers:{
                 'refer' : 'myRefer'
             }
         }
     }
/>

可以发现不同的参数类型，在JS端使用的个中差异。JavaScript所得知的属性类型会由方法的第二个参数的类型来自动决定。支持的类型有：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap。

当前阶段VideoViewManager类的完整代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public class VideoViewManager extends SimpleViewManager{
 
     @Override
     public String getName() {
         return "VideoView" ;
     }
 
     @Override
     protected VideoView createViewInstance(ThemedReactContext reactContext) {
         VideoView video = new VideoView(reactContext);
         return video;
     }
 
     @Override
     public void onDropViewInstance(VideoView view) { //对象销毁时
         super .onDropViewInstance(view);
          view.stopPlayback(); //停止播放
     }
 
     @ReactProp(name = "source" )
     public void setSource(VideoView videoView,@Nullable ReadableMap source){
         if (source != null ){
             if (source.hasKey( "url" )) {
                 String url = source.getString( "url" );
                 System.out.println( "url = " +url);
                 HashMap headerMap = new HashMap<>();
                 if (source.hasKey( "headers" )) {
                     ReadableMap headers = source.getMap( "headers" );
                     ReadableMapKeySetIterator iter = headers.keySetIterator();
                     while (iter.hasNextKey()) {
                         String key = iter.nextKey();
                         headerMap.put(key, headers.getString(key));
                     }
                 }
                 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                     videoView.setVideoURI(Uri.parse(url),headerMap);
                 } else {
                     try {
                         Method setVideoURIMethod = videoView.getClass().getMethod( "setVideoURI" , Uri.class, Map.class);
                         setVideoURIMethod.invoke(videoView, Uri.parse(url), headerMap);
                     } catch (Exception e) {
                         e.printStackTrace();
                     }
                 }
                 videoView.start();
             }
         }
     }
}

接着，我们需要和自定义模块一样，创建VideoViewPackage，并注册到ReactNativeHost

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class VideoViewPackage implements ReactPackage {
     @Override
     public List createNativeModules(ReactApplicationContext reactContext) {
         return Collections.emptyList();
     }
 
     @Override
     public List> createJSModules() {
         return Collections.emptyList();
     }
 
     @Override
     public List createViewManagers(ReactApplicationContext reactContext) {
         return Arrays.asList(
                 new VideoViewManager()
         );
     }
}

MainApplication.java代码

?
1
2
3
4
5
6
7
8
@Override
protected List getPackages() {
     return Arrays.asList(
             new MainReactPackage(),
             new OrientationPackage(),
             new VideoViewPackage()
     );
}

好了，写完java端，现在需要在JS端调用它。

(三)实现JS端的组件

在项目js/component文件夹下新建VideoView.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React,{ PropTypes }from 'react' ;
import {requireNativeComponent,View} from 'react-native' ;
 
var VideoView = {
     name: 'VideoView' ,
     propTypes:{
         style: View.propTypes.style,
         source:PropTypes.shape({
             url:PropTypes.string,
             headers:PropTypes.object,
         }),
         ...View.propTypes, //包含默认的View的属性，如果没有这句会报‘has no propType for native prop’错误
     }
};
var RCTVideoView = requireNativeComponent( 'VideoView' ,VideoView);
module.exports = RCTVideoView;

首先和自定义模块导入的NativeModules不同，组件使用的模块是requireNativeComponent，接着我们需要给组件定义声明一些属性name（用于调试信息显示）、propTypes。

其中重要的是propTypes，它定义了该组件拥有哪些属性可以使用，对应到原生视图上。由于source是url、headers一组属性值构成的，所以使用PropTypes.shape来定义。

最后不要遗漏了 …View.propTypes 这句，它包含了默认View的属性，如果没有这句就会报错。

requireNativeComponent通常接受两个参数，第一个参数是原生视图的名字(JAVA层VideoViewManager$getName的值)，而第二个参数是一个描述组件接口的对象。最后通过module.exports导出提供给其他组件使用。

在VideoPlayScene.js中使用:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React, {Component} from 'react' ;
import {
     View,
     WebView,
     NativeModules,
} from 'react-native' ;
import VideoView from './component/VideoView' ;
 
export default class VideoPlayScene extends Component {
     constructor(props) {
         super (props);
     }
 
     render() {
         return (
             'center' ,justifyContent: 'center' ,}}>
                
                     style={ {height:250,width:380}}
                     source={
                         {
                             url: 'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4' ,
                             headers:{
                                 'refer' : 'myRefer'
                             }
                         }
                     }
                 />
            
         );
     }
}

然后运行。注意：如果改动涉及到JAVA层的修改，那么需要关闭掉React Packager窗口，并在cmd重新执行react-native run-android 命令。

可以看到视频正常播放了，但好像只是仅仅能使用native层的播放器，然而native层的一些信息我们还无法获取到，比如：视频的总时长、视频当前播放的时间点等；而且还不能控制组件的状态，比如：视频的快进、暂停、播放等。接下来我们将实现这些。

(四)native层向js发送消息事件

我们声明一个VideoViewManager的内部类RCTVideoView，它继承VideoView，并实现了一些必要的接口。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
private static class RCTVideoView extends VideoView implements LifecycleEventListener,
         MediaPlayer.OnPreparedListener,
         MediaPlayer.OnCompletionListener,
         MediaPlayer.OnErrorListener,
         MediaPlayer.OnInfoListener,MediaPlayer.OnBufferingUpdateListener{
 
     public RCTVideoView(ThemedReactContext reactContext) {
         super (reactContext);
         reactContext.addLifecycleEventListener( this );
         setOnPreparedListener( this );
         setOnCompletionListener( this );
         setOnErrorListener( this );
     }
 
     @Override
     public void onHostResume() {
         FLog.e(VideoViewManager.class, "onHostResume" );
     }
 
     @Override
     public void onHostPause() {
         FLog.e(VideoViewManager.class, "onHostPause" );
         pause();
     }
 
     @Override
     public void onHostDestroy() {
         FLog.e(VideoViewManager.class, "onHostDestroy" );
     }
 
     @Override
     public void onPrepared(MediaPlayer mp) { //视频加载成功准备播放
         FLog.e(VideoViewManager.class, "onPrepared duration = " +mp.getDuration());
         mp.setOnInfoListener( this );
         mp.setOnBufferingUpdateListener( this );
     }
 
     @Override
     public void onCompletion(MediaPlayer mp) { //视频播放结束
         FLog.e(VideoViewManager.class, "onCompletion" );
     }
 
     @Override
     public boolean onError(MediaPlayer mp, int what, int extra) { //视频播放出错
         FLog.e(VideoViewManager.class, "onError what = " + what+ " extra = " +extra);
         return false ;
     }
 
     @Override
     public boolean onInfo(MediaPlayer mp, int what, int extra) {
         FLog.e(VideoViewManager.class, "onInfo" );
         switch (what) {
             /**
              * 开始缓冲
              */
             case MediaPlayer.MEDIA_INFO_BUFFERING_START:
                 FLog.e(VideoViewManager.class, "开始缓冲" );
                 break ;
             /**
              * 结束缓冲
              */
             case MediaPlayer.MEDIA_INFO_BUFFERING_END:
                 FLog.e(VideoViewManager.class, "结束缓冲" );
                 break ;
             /**
              * 开始渲染视频第一帧画面
              */
             case MediaPlayer.MEDIA_INFO_VIDEO_RENDERING_START:
                 FLog.e(VideoViewManager.class, "开始渲染视频第一帧画面" );
                 break ;
             default :
                 break ;
         }
         return false ;
     }
 
     @Override
     public void onBufferingUpdate(MediaPlayer mp, int percent) { //视频缓冲进度
         FLog.e(VideoViewManager.class, "onBufferingUpdate percent = " +percent);
     }
}

这里并没有实现什么逻辑，只是打印一下信息。接着将VideoViewManager$createViewInstance使用RCTVideoView对象

?
1
2
3
4
5
6
7
8
9
10
11
12
@Override
protected VideoView createViewInstance(ThemedReactContext reactContext) {
     RCTVideoView video = new RCTVideoView(reactContext);
     return video;
}
 
@Override
public void onDropViewInstance(VideoView view) { //销毁对象时释放一些资源
     super .onDropViewInstance(view);
     ((ThemedReactContext) view.getContext()).removeLifecycleEventListener((RCTVideoView) view);
      view.stopPlayback();
}

setSource传入的第一个参数也是RCTVideoView对象

?
1
2
3
4
@ReactProp(name = "source" )
public void setSource(RCTVideoView videoView,@Nullable ReadableMap source){
     //省略其它代码
}

接着我们在java层的onPrepared方法中获取视频播放时长，并想js发送事件通知。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Override
public void onPrepared(MediaPlayer mp) { //视频加载成功准备播放
     int duration = mp.getDuration();
     FLog.e(VideoViewManager.class, "onPrepared duration = " +duration);
     mp.setOnInfoListener( this );
     mp.setOnBufferingUpdateListener( this );
     //向js发送事件
     WritableMap event = Arguments.createMap();
     event.putInt( "duration" ,duration); //key用于js中的nativeEvent
     ReactContext reactContext = (ReactContext) getContext();
     reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                     getId(), //native层和js层两个视图会依据getId()而关联在一起
                     "topChange" , //事件名称
                     event //事件携带的数据
             );
}

receiveEvent接收三个参数，参数说明如注释所示，这个事件名topChange在JavaScript端映射到onChange回调属性上（这个映射关系在UIManagerModuleConstants.java文件里），这个回调会被原生事件执行。

然后在JS层接收该事件通知，将VideoView.js改为如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class VideoView extends Component{
     constructor(props){
         super (props);
     }
 
     _onChange(event){
         if (! this .props.onPrepared){
             return ;
         }
         this .props.onPrepared(event.nativeEvent.duration);
     }
 
     render(){
         return this .props} onChange={ this ._onChange.bind( this )}/>;
     };
}
 
VideoView.name = "VideoView" ;
VideoView.propTypes = {
     onPrepared:PropTypes.func,
     style: View.propTypes.style,
     source:PropTypes.shape({
         url:PropTypes.string,
         headers:PropTypes.object,
     }),
     ...View.propTypes,
};
//需要注意下面这两句
var RCTVideoView = requireNativeComponent( 'VideoView' ,VideoView,{
     nativeOnly: {onChange: true }
});
module.exports = VideoView;

我们在java中发送的事件中携带的数据WritableMap中，定义的key与在js中event.nativeEvent.duration一致，nativeEvent和key就可以获取到value。

有时候有一些特殊的属性，想从原生组件中导出，但是又不希望它们成为对应React封装组件的属性，可以使用nativeOnly来声明。如果没有什么特殊属性需要设置的话，requireNativeComponent第三个参数可以不用。

需要注意的是，之前VideoView.js以下两句是这样

?
1
2
var RCTVideoView = requireNativeComponent( 'VideoView' ,VideoView);
module.exports = RCTVideoView;

修改之后变这样

?
1
2
3
4
var RCTVideoView = requireNativeComponent( 'VideoView' ,VideoView,{
     nativeOnly: {onChange: true }
});
module.exports = VideoView;

不一样的地方在于一个exports RCTVideoView，一个exports VideoView

如果你不小心还是使用之前exports RCTVideoView 的那样，那么会一直接收不到onChange事件的回调！（本人踩到的坑）

ok，最后在VideoPlayScene.js调用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
_onPrepared(duration){
     console.log( "JS duration = " +duration);
}
 
render() {
     return (
         'center' , justifyContent: 'center' ,}}>
            
                 style={ {height: 250, width: 380}}
                 source={
                 {
                     url: 'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4' ,
                     headers: {
                         'refer' : 'myRefer'
                     }
                 }
                 }
                 onPrepared={ this ._onPrepared}
             />
        
     );
}

VideoView增加了onPrepared回调方法，运行程序后，可以看到打印了duration信息。但是如果native层需要发送的事件比较多的情况下，那么如果我们使用单一的topChange事件，就会导致回调的onChange不是单一职责。那么，我们是否可以自定义该事件的名称呢，使每一个事件对应各自的回调方法呢？下面我们就讲讲如何自定义事件名称。

(五)自定义事件名称

我们以播放器播放完成的事件为例，监听onCompletion事件。

首先，在VideoViewManager类中重写getExportedCustomDirectEventTypeConstants方法，然后自定义事件名称。

?
1
2
3
4
5
@Override
public Map getExportedCustomDirectEventTypeConstants() {
     return MapBuilder.of(
             "onCompletion" , MapBuilder.of( "registrationName" , "onCompletion" ));
}

第一个onCompletion字符串是java端发送事件是的名称，即receiveEvent方法的第二个参数值；第二个onCompletion字符串是定义在js端的回调方法；registrationName字符串的值是固定的，不能修改。对比一下topChange事件就知道了

?
1
2
3
4
5
@Override
public Map getExportedCustomDirectEventTypeConstants() {
     return MapBuilder.of(
             "topChange" , MapBuilder.of( "registrationName" , "onChange" ));
}

接着，在内部类RCTVideoView的onCompletion方法发送事件

?
1
2
3
4
5
6
7
8
9
10
@Override
public void onCompletion(MediaPlayer mp) { //视频播放结束
     FLog.e(VideoViewManager.class, "onCompletion" );
     ReactContext reactContext = (ReactContext) getContext();
     reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
             getId(), //native和js两个视图会依据getId()而关联在一起
             "onCompletion" , //事件名称
             null
     );
}

由于只是通知js端，告诉它播放结束，不用携带任何数据，所以receiveEvent的第三个参数为null即可。然后在VideoView.js增加propTypes属性。

?
1
2
3
4
VideoView.propTypes = {
     onCompletion:PropTypes.func,
     //省略其它代码
};

最后在VideoPlayScene.js中使用VideoView时，增加onCompletion属性即可。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     style={ {height: 250, width: 380}}
     source={
     {
         url: 'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4' ,
         headers: {
             'refer' : 'myRefer'
         }
     }
     }
     onPrepared={ this ._onPrepared}
     onCompletion={()=>{
         console.log( "JS onCompletion" );
     }}
/>

运行程序后就可以看到log输出了（打开debug js remotely在浏览器查看，或者在android studio中查看）

React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发_第1张图片

其他的事件的定义流程都一样，比如获取当前进度信息、缓存进度、错误回调等。目前为止，VideoViewManager.java的完整代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
public class VideoViewManager extends SimpleViewManager{
 
     private enum VideoEvent{
         EVENT_PREPARE( "onPrepared" ),
         EVENT_PROGRESS( "onProgress" ),
         EVENT_UPDATE( "onBufferUpdate" ),
         EVENT_ERROR( "onError" ),
         EVENT_COMPLETION( "onCompletion" );
 
         private String mName;
         VideoEvent(String name) {
             this .mName = name;
         }
 
         @Override
         public String toString() {
             return mName;
         }
     }
 
     @Override
     public String getName() {
         return "VideoView" ;
     }
 
     @Override
     protected VideoView createViewInstance(ThemedReactContext reactContext) {
         RCTVideoView video = new RCTVideoView(reactContext);
         return video;
     }
 
     @Nullable
     @Override
     public Map getCommandsMap() {
         return super .getCommandsMap();
     }
 
     @Override
     public void receiveCommand(VideoView root, int commandId, @Nullable ReadableArray args) {
         super .receiveCommand(root, commandId, args);
     }
 
     @Nullable
     @Override
     public Map getExportedCustomDirectEventTypeConstants() {
         MapBuilder.Builder builder = MapBuilder.builder();
         for (VideoEvent event:VideoEvent.values()){
             builder.put(event.toString(),MapBuilder.of( "registrationName" , event.toString()));
         }
         return builder.build();
     }
 
     @Override
     public void onDropViewInstance(VideoView view) { //销毁对象时释放一些资源
         super .onDropViewInstance(view);
         ((ThemedReactContext) view.getContext()).removeLifecycleEventListener((RCTVideoView) view);
          view.stopPlayback();
     }
 
     @ReactProp(name = "source" )
     public void setSource(RCTVideoView videoView,@Nullable ReadableMap source){
         if (source != null ){
             if (source.hasKey( "url" )) {
                 String url = source.getString( "url" );
                 FLog.e(VideoViewManager.class, "url = " +url);
                 HashMap headerMap = new HashMap<>();
                 if (source.hasKey( "headers" )) {
                     ReadableMap headers = source.getMap( "headers" );
                     ReadableMapKeySetIterator iter = headers.keySetIterator();
                     while (iter.hasNextKey()) {
                         String key = iter.nextKey();
                         String value = headers.getString(key);
                         FLog.e(VideoViewManager.class,key+ " = " +value);
                         headerMap.put(key,value);
                     }
                 }
                 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                     videoView.setVideoURI(Uri.parse(url),headerMap);
                 } else {
                     try {
                         Method setVideoURIMethod = videoView.getClass().getMethod( "setVideoURI" , Uri.class, Map.class);
                         setVideoURIMethod.invoke(videoView, Uri.parse(url), headerMap);
                     } catch (Exception e) {
                         e.printStackTrace();
                     }
                 }
                 videoView.start();
             }
         }
     }
 
     private static class RCTVideoView extends VideoView implements LifecycleEventListener,
             MediaPlayer.OnPreparedListener,
             MediaPlayer.OnCompletionListener,
             MediaPlayer.OnErrorListener,
             MediaPlayer.OnInfoListener,
             MediaPlayer.OnBufferingUpdateListener,
             Runnable{
 
         private Handler mHandler;
 
         public RCTVideoView(ThemedReactContext reactContext) {
             super (reactContext);
             reactContext.addLifecycleEventListener( this );
             setOnPreparedListener( this );
             setOnCompletionListener( this );
             setOnErrorListener( this );
             mHandler = new Handler();
         }
 
         @Override
         public void onHostResume() {
             FLog.e(VideoViewManager.class, "onHostResume" );
         }
 
         @Override
         public void onHostPause() {
             FLog.e(VideoViewManager.class, "onHostPause" );
             pause();
         }
 
         @Override
         public void onHostDestroy() {
             FLog.e(VideoViewManager.class, "onHostDestroy" );
             mHandler.removeCallbacks( this );
         }
 
         @Override
         public void onPrepared(MediaPlayer mp) { //视频加载成功准备播放
             int duration = mp.getDuration();
             FLog.e(VideoViewManager.class, "onPrepared duration = " +duration);
             mp.setOnInfoListener( this );
             mp.setOnBufferingUpdateListener( this );
             WritableMap event = Arguments.createMap();
             event.putInt( "duration" ,duration); //key用于js中的nativeEvent
             dispatchEvent(VideoEvent.EVENT_PREPARE.toString(),event);
             mHandler.post( this );
         }
 
         @Override
         public void onCompletion(MediaPlayer mp) { //视频播放结束
             FLog.e(VideoViewManager.class, "onCompletion" );
             dispatchEvent(VideoEvent.EVENT_COMPLETION.toString(), null );
             mHandler.removeCallbacks( this );
             int progress = getDuration();
             WritableMap event = Arguments.createMap();
             event.putInt( "progress" ,progress);
             dispatchEvent(VideoEvent.EVENT_PROGRESS.toString(),event);
         }
 
         @Override
         public boolean onError(MediaPlayer mp, int what, int extra) { //视频播放出错
             FLog.e(VideoViewManager.class, "onError what = " + what+ " extra = " +extra);
             mHandler.removeCallbacks( this );
             WritableMap event = Arguments.createMap();
             event.putInt( "what" ,what);
             event.putInt( "extra" ,what);
             dispatchEvent(VideoEvent.EVENT_ERROR.toString(),event);
             return true ;
         }
 
         @Override
         public boolean onInfo(MediaPlayer mp, int what, int extra) {
             FLog.e(VideoViewManager.class, "onInfo" );
             switch (what) {
                 /**
                  * 开始缓冲
                  */
                 case MediaPlayer.MEDIA_INFO_BUFFERING_START:
                     FLog.e(VideoViewManager.class, "开始缓冲" );
                     break ;
                 /**
                  * 结束缓冲
                  */
                 case MediaPlayer.MEDIA_INFO_BUFFERING_END:
                     FLog.e(VideoViewManager.class, "结束缓冲" );
                     break ;
                 /**
                  * 开始渲染视频第一帧画面
                  */
                 case MediaPlayer.MEDIA_INFO_VIDEO_RENDERING_START:
                     FLog.e(VideoViewManager.class, "开始渲染视频第一帧画面" );
                     break ;
                 default :
                     break ;
             }
             return false ;
         }
 
         @Override
         public void onBufferingUpdate(MediaPlayer mp, int percent) { //视频缓冲进度
             FLog.e(VideoViewManager.class, "onBufferingUpdate percent = " +percent);
             int buffer = (int) Math.round((double) (mp.getDuration() * percent) / 100.0);
             WritableMap event = Arguments.createMap();
             event.putInt( "buffer" ,buffer);
             dispatchEvent(VideoEvent.EVENT_UPDATE.toString(),event);
         }
 
         @Override
         public void run() {
             int progress = getCurrentPosition();
             WritableMap event = Arguments.createMap();
             event.putInt( "progress" ,progress);
             dispatchEvent(VideoEvent.EVENT_PROGRESS.toString(),event);
             mHandler.postDelayed( this ,1000);
         }
 
         private void dispatchEvent(String eventName,WritableMap eventData){
             ReactContext reactContext = (ReactContext) getContext();
             reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                     getId(), //native和js两个视图会依据getId()而关联在一起
                     eventName, //事件名称
                     eventData
             );
         }
     }
}

对应的VideoView.js完整代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
class VideoView extends Component{
     constructor(props){
         super (props);
     }
 
     /*_onChange(event){
         if(!this.props.onPrepared){
             return;
         }
         this.props.onPrepared(event.nativeEvent.duration);
     }*/
 
     _onPrepared(event){
         if (! this .props.onPrepared){
             return ;
         }
         this .props.onPrepared(event.nativeEvent.duration);
     }
 
     _onError(event){
         if (! this .props.onError){
             return ;
         }
         this .props.onError(event.nativeEvent);
     }
 
     _onBufferUpdate(event){
         if (! this .props.onBufferUpdate){
             return ;
         }
         this .props.onBufferUpdate(event.nativeEvent.buffer);
     }
 
     _onProgress(event){
         if (! this .props.onProgress){
             return ;
         }
         this .props.onProgress(event.nativeEvent.progress);
     }
 
     render(){
         //return ;
         return
             {... this .props}
             onPrepared={ this ._onPrepared.bind( this )}
             onError={ this ._onError.bind( this )}
             onBufferUpdate={ this ._onBufferUpdate.bind( this )}
             onProgress={ this ._onProgress.bind( this )}
         />;
     };
}
 
VideoView.name = "VideoView" ;
VideoView.propTypes = {
     onPrepared:PropTypes.func,
     onCompletion:PropTypes.func,
     onError:PropTypes.func,
     onBufferUpdate:PropTypes.func,
     onProgress:PropTypes.func,
     style: View.propTypes.style,
     source:PropTypes.shape({
         url:PropTypes.string,
         headers:PropTypes.object,
     }),
     ...View.propTypes,
};
 
var RCTVideoView = requireNativeComponent( 'VideoView' ,VideoView,{
     nativeOnly: {onChange: true }
});
module.exports = VideoView;

VideoView的使用(省略其它代码)，VideoPlayScene.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
     style={ {height: 250, width: 380}}
     source={
     {
         url: 'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4' ,
         headers: {
             'refer' : 'myRefer'
         }
     }
     }
     onPrepared={ this ._onPrepared}
     onCompletion={()=>{
         console.log( "JS onCompletion" );
     }}
     onError={(e)=>{
         console.log( "what=" +e.what+ " extra=" +e.extra);
     }}
     onBufferUpdate={(buffer)=>{
         console.log( "JS buffer = " +buffer);
     }}
     onProgress={(progress)=>{
         console.log( "JS progress = " +progress);
     }}
/>
(六)js层向native层发送命令

讲完native层向js发送事件后，那么js如何向native命令呢？继续往下看。

比如在js端我想通过点击某个按钮，来控制视频暂停，那么就需要native层来响应这个操作，因为native掌握着VideoView的所有权，暂停可以通过调用VideoView对象的pause方法。

首先，我们需要在native层定义这些命令，并在接收到命令时处理相关操作。

在VideoViewManager重写getCommandsMap方法。

?
1
2
3
4
5
6
7
8
9
private static final int COMMAND_PAUSE_ID = 1;
private static final String COMMAND_PAUSE_NAME = "pause" ;
 
@Override
public Map getCommandsMap() {
     return MapBuilder.of(
             COMMAND_PAUSE_NAME,COMMAND_PAUSE_ID
     );
}

getCommandsMap接收多组命令，每组命令需要包括名称(js端调用的方法名)和命令id，如上面的COMMAND_PAUSE_NAME 和 COMMAND_PAUSE_ID。

然后重写receiveCommand方法，处理相应的命令。

?
1
2
3
4
5
6
7
8
9
10
@Override
public void receiveCommand(VideoView root, int commandId, @Nullable ReadableArray args) {
     switch (commandId){
         case COMMAND_PAUSE_ID:
             root.pause();
             break ;
         default :
             break ;
     }
}

我们在接收到COMMAND_PAUSE_ID 命令时，调用了VideoView的pause方法进行暂停播放。

接下来就是js端如何发起该命令了。

打开VideoView.js，代码添加如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {
     requireNativeComponent,
     View,
     UIManager,
     findNodeHandle,
} from 'react-native' ;
 
var RCT_VIDEO_REF = 'VideoView' ;
 
class VideoView extends Component{
     //省略其它代码
     pause(){
         //向native层发送命令
         UIManager.dispatchViewManagerCommand(
             findNodeHandle( this .refs[RCT_VIDEO_REF]),
             UIManager.VideoView.Commands.pause, //Commands.pause与native层定义的COMMAND_PAUSE_NAME一致
             null //命令携带的参数数据
         );
     }
     render(){
         return
             ref = {RCT_VIDEO_REF}
             //省略其它代码
         />;
     };
}

主要是定义了一个pause函数，该函数内使用UIManager.dispatchViewManagerCommand向native层发送命令，该方法接收三个参数：第一个参数是组件的实例对象；第二个是发送的命令名称，与native层定义的command name一致；第三个是命令携带的参数数据。

打开VideoPlayScene.js，给视频播放添加暂停功能。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default class VideoPlayScene extends Component {
     //暂停播放
     _onPressPause(){
         this .video.pause();
     }
 
     render() {
         return (
             'center' ,}}>
                
                     ref={(video)=>{ this .video = video}}
                     //省略其它代码
                 />
                 'row' ,justifyContent: 'flex-start' }}>
                     { this .state.time}/{ this .state.totalTime}
                     this ._onPressPause.bind( this )}>
                         暂停
                    
                
            
         );
     }
}

好了，运行程序，你发现已经可以暂停播放了。同样的流程，我们再给播放器添加‘开始播放’的功能。

VideoViewManager.java 添加开始播放的代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private static final int COMMAND_START_ID = 2;
private static final String COMMAND_START_NAME = "start" ;
@Override
public Map getCommandsMap() {
     return MapBuilder.of(
             COMMAND_PAUSE_NAME,COMMAND_PAUSE_ID,
             COMMAND_START_NAME,COMMAND_START_ID);
}
 
@Override
public void receiveCommand(VideoView root, int commandId, @Nullable ReadableArray args) {
     FLog.e(VideoViewManager.class, "receiveCommand id = " +commandId);
     switch (commandId){
         case COMMAND_PAUSE_ID:
             root.pause();
             break ;
         case COMMAND_START_ID:
             root.start();
             break ;
         default :
             break ;
     }
}

VideoView.js 添加开始播放的代码

?
1
2
3
4
5
6
7
start(){
     UIManager.dispatchViewManagerCommand(
         findNodeHandle( this .refs[RCT_VIDEO_REF]),
         UIManager.VideoView.Commands.start,
         null
     );
}

VideoPlayScene.js添加开始播放的功能

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
_onPressPause(){
     this .video.pause();
}
 
_onPressStart(){
     this .video.start();
}
 
render() {
     return (
         'center' ,}}>
            
                 ref={(video)=>{ this .video = video}}
                 //省略其它代码
             />
             'row' ,justifyContent: 'flex-start' }}>
                 { this .state.time}/{ this .state.totalTime}
                 this ._onPressPause.bind( this )}>
                     暂停
                
                 this ._onPressStart.bind( this )}>
                     开始
                
            
 
        
     );
}

最后运行程序，效果如下

ok，上面的pause和start方法都是没有带参数的，那么如果native层需要参数呢，比如seekTo（快进），这个方法需要有一个参数，设置视频快进到的位置，那么如何处理呢？

VideoViewManager.java增加seekTo命令

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
private static final int COMMAND_SEEK_TO_ID = 3;
private static final String COMMAND_SEEK_TO_NAME = "seekTo" ;
@Override
public Map getCommandsMap() {
     return MapBuilder.of(
             COMMAND_PAUSE_NAME,COMMAND_PAUSE_ID,
             COMMAND_START_NAME,COMMAND_START_ID,
             COMMAND_SEEK_TO_NAME, COMMAND_SEEK_TO_ID
     );
}
@Override
public void receiveCommand(VideoView root, int commandId, @Nullable ReadableArray args) {
     FLog.e(VideoViewManager.class, "receiveCommand id = " +commandId);
     switch (commandId){
         case COMMAND_PAUSE_ID: //暂停
             root.pause();
             break ;
         case COMMAND_START_ID: //开始
             root.start();
             break ;
         case COMMAND_SEEK_TO_ID: //快进
             if (args != null ) {
                 int msec = args.getInt(0); //获取第一个位置的数据
                 root.seekTo(msec);
             }
             break ;
         default :
             break ;
     }
}

在receiveCommand的case COMMAND_SEEK_TO_ID分支，可以看到，args是个Array，通过index获取到对应的数据，如获取第一个int类型的数据，使用args.getInt(0)。

VideoView.js 增加seekTo函数

?
1
2
3
4
5
6
7
seekTo(millSecond){
     UIManager.dispatchViewManagerCommand(
         findNodeHandle( this .refs[RCT_VIDEO_REF]),
         UIManager.VideoView.Commands.seekTo,
         [millSecond] //数据形如：["第一个参数","第二个参数",3]
     );
}

dispatchViewManagerCommand的第三个参数，接收一组数据（array），可以是不同数据类型，native层通过index获取数据。

VideoPlayScene.js

?
1
2
3
4
5
6
7
8
_onPressSeekTo(){
     var millSecond = this .state.time + 1000;
     this .video.seekTo(millSecond);
}
//省略其它代码
this ._onPressSeekTo.bind( this )}>
     快进

这样就完成了原生UI组件的开发了，完整的代码太长了，就不贴出来了，需要的话，项目地址:https://github.com/helengray/XiFan

(七)最后总结

本节讲述了React Native android端的自定义UI组件开发流程，包括设置UI属性、native层向js层发送事件、js层向native层发送命令，完整的讲述了react native与原生之间的通信过程。到此，这个小项目已经阶段性完成了，

刚创建的React Native交流九群:536404410,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

 

引用原文：http://www.lcode.org/react-native%E5%AE%9E%E6%88%98%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B%E4%B9%8B%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8E%9F%E7%94%9Fui%E7%BB%84%E4%BB%B6%E5%92%8Cvideoview%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE/

 

写博客是为了记住自己容易忘记的东西，另外也是对自己工作的总结，文章可以转载，无需版权。希望尽自己的努力，做到更好，大家一起努力进步！

如果有什么问题，欢迎大家一起探讨，代码如有问题，欢迎各位大神指正！

转载于:https://www.cnblogs.com/summary-2017/p/7709484.html

你可能感兴趣的:(ui,java,javascript)

  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • LocalDateTime 转 String igotyback java开发语言
    importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • Java 重写(Override)与重载(Overload) 叨唧唧的
    Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
  • 简单了解 JVM 记得开心一点啊 jvm
    目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
  • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
    前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
  • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言
    1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
  • Java企业面试题3 马龙强_ java
    1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
  • JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Javajava
    Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
  • linux 发展史 种树的猴子 内核java操作系统linux大数据
    linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
  • Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选javakafka
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
  • 白骑士的Java教学基础篇 2.5 控制流语句 白骑士所长 Java教学java开发语言
    欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
  • python语法——三目运算符 HappyRocking pythonpython三目运算符
    在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
  • spring如何整合druid连接池？ 惜.己 springspringjunit数据库javaidea后端xml
    目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
  • ArrayList 源码解析 程序猿进阶 Java基础ArrayListListjava面试性能优化架构设计idea
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
    MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
  • Java：爬虫框架 dingcho Javajava爬虫
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • python怎么将png转为tif_png转tif weixin_39977276
    发国外的文章要求图片是tif，cmyk色彩空间的。大小尺寸还有要求。比如网上大神多，找到了一段代码，感谢！https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi
  • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
    最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他