适配安卓毛玻璃、屏幕旋转组件

jackhanm · Oct 16, 2017 · 078fd38 · 078fd38
1 parent 7a76f9f
commit 078fd38
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 25 deletions.
diff --git a/android/app/src/main/java/com/one/MainActivity.java b/android/app/src/main/java/com/one/MainActivity.java
@@ -1,6 +1,8 @@
 package com.one;
 
 import com.facebook.react.ReactActivity;
+import android.content.Intent;
+import android.content.res.Configuration;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +14,12 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "one";
     }
+
+    @Override
+    public void onConfigurationChanged(Configuration newConfig) {
+        super.onConfigurationChanged(newConfig);
+        Intent intent = new Intent("onConfigurationChanged");
+        intent.putExtra("newConfig", newConfig);
+        this.sendBroadcast(intent);
+    }
 }
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-native": "0.47.2",
     "react-native-blur": "^3.1.3",
     "react-native-button": "^2.1.0",
+    "react-native-device-info": "^0.12.0",
     "react-native-image-zoom-viewer": "^2.0.10",
     "react-native-message-bar": "^2.0.4",
     "react-native-orientation": "^3.1.0",
@@ -44,4 +45,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}
diff --git a/src/components/pages/movie/movieDetail.js b/src/components/pages/movie/movieDetail.js
@@ -2,14 +2,15 @@
  * Created by guangqiang on 2017/10/9.
  */
 import React, {Component} from 'react'
-import {View, Text, TouchableOpacity, StyleSheet, Image, ScrollView, Platform, findNodeHandle} from 'react-native'
+import {View, Text, TouchableOpacity, Image, ScrollView, Platform, findNodeHandle} from 'react-native'
 import {commonStyle} from '../../../utils/commonStyle'
 import {VibrancyView, BlurView} from 'react-native-blur'
 import deviceInfo from '../../../utils/deviceInfo'
 import {Icon} from '../../../utils/icon'
 import MiniComment from './comment/miniCommentCell'
 import PlusComment from './comment/plusCommentCell'
 import {Actions} from 'react-native-router-flux'
+import {StyleSheet} from '../../common'
 export default class MovieDetail extends Component {
 
   constructor(props) {
@@ -121,7 +122,7 @@ export default class MovieDetail extends Component {
             style={styles.bgContainer}
             source={{uri: basic.img}}
             resizeMode='stretch'
-            onLoadEnd={this.imageLoaded.bind(this)}
+            onLoadEnd={() => this.imageLoaded()}
           />
           <View style={styles.bgContainer}>
             {
@@ -222,7 +223,7 @@ export default class MovieDetail extends Component {
                 </View>
               </TouchableOpacity>
               <ScrollView
-                style={{height: 135, margin: 10, marginLeft: 0, marginTop: 0}}
+                style={styles.actorCell}
                 horizontal={true}
                 removeClippedSubviews={true}
                 showsHorizontalScrollIndicator={false}
@@ -446,9 +447,10 @@ const styles = StyleSheet.create({
   },
   headerStyle: {
     marginTop: -50,
+    _marginTop: 0,
     flexDirection: 'row',
     marginHorizontal: 10,
-    paddingBottom: 10
+    paddingBottom: 10,
   },
   img: {
     width: 100,
@@ -534,6 +536,16 @@ const styles = StyleSheet.create({
   },
   absolute: {
     position: "absolute",
-    top: 0, left: 0, bottom: 0, right: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
   },
+  actorCell: {
+    height: 135,
+    _height: 140,
+    margin: 10,
+    marginLeft: 0,
+    marginTop: 0
+  }
 })
diff --git a/src/components/pages/movie/moviePlayer.js b/src/components/pages/movie/moviePlayer.js
@@ -2,7 +2,7 @@
  * Created by guangqiang on 2017/9/7.
  */
 import React, {Component} from 'react'
-import {View, Text, StyleSheet, TouchableOpacity, Slider, ActivityIndicator, Modal} from 'react-native'
+import {View, Text, TouchableOpacity, Slider, ActivityIndicator, Modal, Platform} from 'react-native'
 import Video from 'react-native-video'
 import Orientation from 'react-native-orientation'
 import {commonStyle} from '../../../utils/commonStyle'
@@ -11,6 +11,8 @@ import {Actions} from 'react-native-router-flux'
 import {formatTime} from '../../../utils/formatTime'
 import deviceInfo from '../../../utils/deviceInfo'
 import {MessageBarManager} from 'react-native-message-bar'
+import {StyleSheet} from '../../common'
+const playerHeight = 250
 export default class MoviePlayer extends Component {
 
   constructor(props) {
@@ -107,7 +109,8 @@ export default class MoviePlayer extends Component {
         animationType={"none"}
         transparent={true}
         visible={this.state.modalVisible}
-        onRequestClose={() => {alert("Modal has been closed.")}}>
+        onRequestClose={() => alert("Modal has been closed.")}
+      >
         <View style={styles.indicator}>
           <ActivityIndicator
             animating={true}
@@ -125,7 +128,8 @@ export default class MoviePlayer extends Component {
     const {url, title} = this.props
     return (
       <TouchableOpacity
-        style={[styles.movieContainer, {height: orientation === 'PORTRAIT' ? 250 : deviceInfo.deviceWidth, marginTop: orientation === 'PORTRAIT' ? 20 : 0}]}
+        style={[styles.movieContainer, {height: this.state.orientation === 'PORTRAIT' ? playerHeight : deviceInfo.deviceWidth,
+          marginTop: this.state.orientation === 'PORTRAIT' ? Platform.OS === 'ios' ? 20 : 0 : 0, }]}
         onPress={() => this.setState({isTouchedScreen: !this.state.isTouchedScreen})}
       >
         <Video source={{uri: url}}
@@ -253,7 +257,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 10
   },
   indicator: {
-    height: 250,
+    height: playerHeight,
     width: deviceInfo.deviceWidth,
     marginTop: 20,
     alignItems: 'center',

diff --git a/src/components/pages/music/musicPlayer.js b/src/components/pages/music/musicPlayer.js
@@ -2,14 +2,13 @@
  * Created by guangqiang on 2017/9/9.
  */
 import React, {Component} from 'react'
-import {View, Text, TouchableOpacity, StyleSheet, Image, Slider, Animated, Easing} from 'react-native'
+import {View, Text, TouchableOpacity, StyleSheet, Image, Slider, Animated, Easing, Platform, findNodeHandle} from 'react-native'
 import deviceInfo from '../../../utils/deviceInfo'
 import {commonStyle} from '../../../utils/commonStyle'
 import Video from 'react-native-video'
-import actions from '../../../actionCreators/music'
 import {Actions} from 'react-native-router-flux'
 import {MessageBarManager} from 'react-native-message-bar'
-import {VibrancyView} from 'react-native-blur'
+import {VibrancyView, BlurView} from 'react-native-blur'
 import {Icon} from '../../../utils/icon'
 import {formatTime} from '../../../utils/formatTime'
 export default class MusicPlayer extends Component {
@@ -19,6 +18,7 @@ export default class MusicPlayer extends Component {
     this.player = ''
     this.rotation = false
     this.state = {
+      viewRef: null,
       paused: false, // false: 表示播放，true: 表示暂停
       duration: 0.00,
       slideValue: 0.00,
@@ -27,7 +27,7 @@ export default class MusicPlayer extends Component {
       playMode: 0,
       spinValue: new Animated.Value(0),
       playIcon: 'music_paused_o',
-      playModeIcon: 'music_cycle_o'
+      playModeIcon: 'music_cycle_o',
     }
     this.spinAnimated = Animated.timing(this.state.spinValue, {
       toValue: 1,
@@ -78,19 +78,16 @@ export default class MusicPlayer extends Component {
 
   componentDidMount() {
     this.spin()
-    // 先获取到播放列表
     this.props.getMusicList(2017, 6, {}).then(response =>{
       console.log(response)
     })
-    // 获取xiami音乐信息
     this.props.getxiamiMusic(this.props.music_id).then(response =>{
       console.log(response)
     })
   }
 
   setDuration(duration) {
     this.setState({duration: duration.duration})
-    // Actions.refresh({title: this.props.musicInfo.title, data: "Changed data"})
   }
 
   setTime(data) {
@@ -104,7 +101,6 @@ export default class MusicPlayer extends Component {
   // 下一首
   nextSong(currentIndex) {
     this.reset()
-    // 获取播放列表数组中数据
     currentIndex === this.props.musicList.length ? currentIndex = 0 : currentIndex
     let newSong = this.props.musicList[currentIndex]
     let music_id = newSong.music_id
@@ -171,7 +167,6 @@ export default class MusicPlayer extends Component {
     }
   }
 
-  // 播放结束
   onEnd(data) {
     this.showMessageBar('亲！')('已帮你切换到下一首')('fuccess')
     // 开始下一首
@@ -233,7 +228,6 @@ export default class MusicPlayer extends Component {
             width: 170,
             height: 170,
             borderRadius: 85,
-            backgroundColor: 'orange',
             alignSelf: 'center',
             position: 'absolute', top: 235,
             transform: [{rotate: this.state.spinValue.interpolate({
@@ -316,19 +310,35 @@ export default class MusicPlayer extends Component {
     )
   }
 
+  imageLoaded() {
+    this.setState({viewRef: findNodeHandle(this.backgroundImage)})
+  }
+
   render() {
     return (
       this.props.musicInfo.url ?
         <View style={styles.container}>
           <Image
+            ref={(img) => { this.backgroundImage = img}}
             style={styles.bgContainer}
             source={{uri: this.props.musicInfo.cover}}
-            resizeMode='cover'/>
+            resizeMode='cover'
+            onLoadEnd={() => this.imageLoaded()}
+          />
           <View style={styles.bgContainer}>
-            <VibrancyView
-              blurType={'light'}
-              blurAmount={20}
-              style={styles.container}/>
+            {
+              Platform.OS === 'ios' ?
+                <VibrancyView
+                  blurType={'light'}
+                  blurAmount={20}
+                  style={styles.container}/> :
+                <BlurView
+                  style={styles.absolute}
+                  viewRef={this.state.viewRef}
+                  blurType="light"
+                  blurAmount={10}
+                />
+            }
           </View>
           {this.renderPlayer()}
         </View> : <View/>
@@ -412,5 +422,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-around'
+  },
+  absolute: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
   }
 })