Skip to content

Commit 4111584

Browse files
manofitmanofit
committed
完成视频播放，支持横竖屏
1 parent b88e471 commit 4111584

File tree

8 files changed

+9623
-11
lines changed

8 files changed

+9623
-11
lines changed

‎News_Pro/android/app/build.gradle

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,8 @@ android {
137137
}
138138

139139
dependencies {
140+
compile project(':react-native-orientation')
141+
compile project(':react-native-video')
140142
compile fileTree(dir: "libs", include: ["*.jar"])
141143
compile "com.android.support:appcompat-v7:23.0.1"
142144
compile "com.facebook.react:react-native:+" // From node_modules

‎News_Pro/android/app/src/main/java/com/news_pro/MainApplication.java

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
import android.app.Application;
44

55
import com.facebook.react.ReactApplication;
6+
import com.github.yamill.orientation.OrientationPackage;
7+
import com.brentvatne.react.ReactVideoPackage;
68
import com.facebook.react.ReactNativeHost;
79
import com.facebook.react.ReactPackage;
810
import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +24,9 @@ public boolean getUseDeveloperSupport() {
2224
@Override
2325
protected List<ReactPackage> getPackages() {
2426
return Arrays.<ReactPackage>asList(
25-
new MainReactPackage()
27+
new MainReactPackage(),
28+
new OrientationPackage(),
29+
new ReactVideoPackage()
2630
);
2731
}
2832

‎News_Pro/android/settings.gradle

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
rootProject.name = 'News_Pro'
2+
include ':react-native-orientation'
3+
project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
4+
include ':react-native-video'
5+
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
26

37
include ':app'

‎News_Pro/app/components/VideoPlayer.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default class VideoPlayer extends React.Component {
3838
super(props);
3939

4040
let hasCover = true
41-
if (!this.props,videoCover){
41+
if (!this.props.videoCover){
4242
hasCover = false
4343
}
4444

@@ -137,13 +137,13 @@ export default class VideoPlayer extends React.Component {
137137
style={{flex: 1}}
138138
maximumTrackTintColor={'#999999'}
139139
minimumTrackTintColor={'#00c06d'}
140-
thumbImage={require('../../assets/images/icon_control_slider.pn')}
140+
thumbImage={require('../../assets/images/icon_control_slider.png')}
141141
value={this.state.currentTime}
142142
minimumValue={0}
143143
maximumValue={Number(this.state.duration)}
144144
onValueChange={this._onSliderValueChange}
145145
/>
146-
<Text style={styles.timeText}>formatTime(this.state.duration)</Text>
146+
<Text style={styles.timeText}>{formatTime(this.state.duration)}</Text>
147147
{
148148
this.props.enableSwitchScreen ?
149149
<TouchableOpacity activeOpacity={0.3} onPress={this._onTapSwitchButton}>

‎News_Pro/app/pages/subPages/VideoDetail.js

Lines changed: 114 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
import VideoPlayer from './../../components/VideoPlayer';
1212
import Orientation from 'react-native-orientation'
1313

14+
const {width: screenWidth, height:screenHeight} = Dimensions.get('window')
15+
1416
export default class VideoDetail extends PureComponent {
1517

1618
constructor(props){
@@ -66,17 +68,125 @@ export default class VideoDetail extends PureComponent {
6668
this.setState({
6769
isFullScreen: false
6870
})
69-
this.videoPlayer.uodateLayout(width, width * 9 / 16, false)
71+
this.videoPlayer.updateLayout(width, width * 9 / 16, false)
7072
}
7173
}
7274

73-
75+
_clickVote = () => {
76+
this.setState({
77+
isVote: true,
78+
voteCount: this.state.voteCount + 1
79+
})
80+
}
7481

7582
render(){
7683
return(
77-
<View>
84+
<View style={styles.container} onLayout={this._onLayoutChange}>
85+
<VideoPlayer
86+
ref={(ref) => this.videoPlayer = ref}
87+
videoURL={this.uri}
88+
videoTitle={this.params.title}
89+
videoCover={this.cover}
90+
onChangeOrientation={this._onOrinentationChange}
91+
onTapBackButton={this._onClickBackButton}
92+
enableSwitchScreen={true}
93+
/>
94+
<View style={{flex: 1, backgroundColor: 'red'}}>
95+
<ScrollView style={{backgroundColor: '#f8f8f8'}}>
96+
<View style={styles.videoInfoContainer}>
97+
<View style={styles.infoTopContainer}>
98+
<Text style={styles.infoTitle}>{this.params.title}</Text>
99+
<TouchableOpacity activeOpacity={1} style={styles.infoRight} onPress={() => {!this.state.isVote && this._clickVote()}}>
100+
<Image style={styles.infoZoveImg} source={this.state.isVote ? require('./../../../assets/images/i_vote_red.png') : require('./../../../assets/images/i_vote_black.png')} resizeMode={'contain'} />
101+
<Text style={[styles.infoZoveText, {color:this.state.isVote ? '#d81e06' : '#000'}]}>{this.state.voteCount}</Text>
102+
</TouchableOpacity>
103+
</View>
78104

105+
<View style={styles.vedioPlayContainer}>
106+
<Image resizeMode={'contain'} source={require('./../../../assets/images/i_right_arrows.png')} style={{width:15, height:15}} />
107+
<Text style={{fontSize:12, color:'#515151'}}>{this.playCount}次播放</Text>
108+
</View>
109+
110+
<View style={styles.vedioUserContainer}>
111+
<View style={{flexDirection:'row', alignItems: 'center'}}>
112+
<Image resizeMode={'contain'} source={{uri:this.topicImg}} style={styles.vedioUserImg} />
113+
<Text style={{fontSize:12, color:'#000'}}>{this.topicName}</Text>
114+
</View>
115+
116+
<TouchableOpacity activeOpacity={0.9} style={styles.subscriptionBtn}>
117+
<Text style={{fontSize:12, color:'#000'}}>+订阅</Text>
118+
</TouchableOpacity>
119+
</View>
120+
</View>
121+
</ScrollView>
122+
123+
<View style={{height: 50, backgroundColor:'#f8f8f8', flexDirection:'row'}}></View>
124+
</View>
79125
</View>
80126
)
81127
}
82-
}
128+
}
129+
130+
const styles = StyleSheet.create({
131+
container: {
132+
flex: 1,
133+
},
134+
videoInfoContainer:{
135+
paddingHorizontal: 10,
136+
paddingVertical: 12,
137+
},
138+
infoTopContainer:{
139+
flexDirection: 'row',
140+
minHeight: 60,
141+
justifyContent: 'space-around',
142+
alignItems: 'flex-start',
143+
},
144+
infoTitle:{
145+
color: '#000',
146+
fontSize: 16,
147+
maxWidth: screenWidth * 0.8,
148+
lineHeight: 28,
149+
},
150+
infoRight: {
151+
alignItems: 'center',
152+
justifyContent: 'center',
153+
alignSelf: 'center',
154+
width: 60,
155+
height: 40,
156+
marginLeft: 20,
157+
borderLeftColor: '#bfbfbf',
158+
borderLeftWidth: 1,
159+
},
160+
infoZoveImg: {
161+
width: 20,
162+
height: 20,
163+
},
164+
infoZoveText: {
165+
fontSize: 12,
166+
},
167+
vedioPlayContainer: {
168+
flexDirection: 'row',
169+
alignItems: 'center',
170+
marginVertical: 12,
171+
},
172+
vedioUserContainer: {
173+
flexDirection: 'row',
174+
alignItems: 'center',
175+
justifyContent: 'space-between'
176+
},
177+
vedioUserImg: {
178+
width: 26,
179+
height: 26,
180+
borderRadius: 26,
181+
marginRight: 5
182+
},
183+
subscriptionBtn: {
184+
width: 70,
185+
height: 30,
186+
borderWidth: 1,
187+
borderColor: '#000',
188+
borderRadius: 20,
189+
justifyContent: 'center',
190+
alignItems: 'center',
191+
}
192+
})

0 commit comments

Comments
 (0)