docs: update README, refactor: optimize code

README.md

@@ -19,8 +19,8 @@ Music resource API: [moe.fm](http://moe.fm/)
 ![](https://github.com/codeestX/MoeFM/raw/master/preview/1.jpg)  
 ![](https://github.com/codeestX/MoeFM/raw/master/preview/2.jpg)
 ![](https://github.com/codeestX/MoeFM/raw/master/preview/3.jpg)  
-![](https://github.com/codeestX/MoeFM/raw/master/preview/4.jpg)
-![](https://github.com/codeestX/MoeFM/raw/master/preview/5.jpg)  
+![](https://github.com/codeestX/MoeFM/raw/master/preview/4.png)
+![](https://github.com/codeestX/MoeFM/raw/master/preview/5.png)  
 
 # Usage
 

js/component/MainScreenNavigator.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react'
-import { Text } from 'react-native'
+import { Text, StyleSheet } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons';
 import { TabNavigator } from 'react-navigation';
 
@@ -25,8 +25,7 @@ export default MainScreenNavigator = TabNavigator({
                     />
                 ),
                 tabBarLabel: ({ focused, tintColor }) => (
-                    <Text style={{fontSize: 12, textAlign: 'center', marginBottom: 2,
-                        color: focused? screenProps.themeColor: tintColor}}>Music</Text>
+                    <Text style={[styles.label, {color: focused? screenProps.themeColor: tintColor}]}>Music</Text>
                 )
             }),},
         Radio: {
@@ -40,8 +39,7 @@ export default MainScreenNavigator = TabNavigator({
                     />
                 ),
                 tabBarLabel: ({ focused, tintColor }) => (
-                    <Text style={{fontSize: 12, textAlign: 'center', marginBottom: 2,
-                        color: focused? screenProps.themeColor: tintColor}}>Radio</Text>
+                    <Text style={[styles.label, {color: focused? screenProps.themeColor: tintColor}]}>Radio</Text>
                 )
             }),},
         Me: { screen: TabMePage,
@@ -54,8 +52,7 @@ export default MainScreenNavigator = TabNavigator({
                     />
                 ),
                 tabBarLabel: ({ focused, tintColor }) => (
-                    <Text style={{fontSize: 12, textAlign: 'center', marginBottom: 2,
-                        color: focused? screenProps.themeColor: tintColor}}>Me</Text>
+                    <Text style={[styles.label, {color: focused? screenProps.themeColor: tintColor}]}>Me</Text>
                 )
             }),},
     }, {
@@ -77,4 +74,12 @@ export default MainScreenNavigator = TabNavigator({
             labelStyle: {fontSize: 9, marginVertical: -1},
         },
     }
-);
+);
+
+const styles = StyleSheet.create({
+    label : {
+        fontSize: 12,
+        textAlign: 'center',
+        marginBottom: 2
+    },
+});

js/container/PlayList.js

@@ -10,7 +10,8 @@ import {
     FlatList,
     Text,
     View,
-    StyleSheet
+    StyleSheet,
+    Platform
 } from 'react-native'
 import Item from '../component/PlayItem'
 import GlobalStyle from '../style/global'
@@ -39,7 +40,7 @@ class PlayList extends Component {
 
     render() {
         return (
-            <View style={{backgroundColor: 'white', height: 265}}>
+            <View style={{backgroundColor: 'white', height: Platform.OS === 'android'? 265: 280}}>
                 <FlatList
                     data={this.props.playList}
                     renderItem={({item, index}) => <Item song={item} index={index} isSelected={this.getCurrentIndex() === index}

js/container/PlayerUIBottom.js

@@ -53,9 +53,9 @@ class PlayerUIBottom extends Component {
                 <Interactable.View
                     ref='headInstance'
                     verticalOnly={true}
-                    snapPoints={[{y: GlobalStyle.window_height-400}, {y: Platform.OS === 'android'? GlobalStyle.window_height-135: GlobalStyle.window_height-120}]}
+                    snapPoints={[{y: GlobalStyle.window_height-400}, {y: Platform.OS === 'android'? GlobalStyle.window_height-135: GlobalStyle.window_height-118}]}
                     boundaries={{top: GlobalStyle.window_height-400}}
-                    initialPosition={{y: Platform.OS === 'android'? GlobalStyle.window_height-135: GlobalStyle.window_height-120}}
+                    initialPosition={{y: Platform.OS === 'android'? GlobalStyle.window_height-135: GlobalStyle.window_height-118}}
                     animatedValueY={this._deltaY}>
                     <View>
                         <CustomButton onPress={() => this.props.onPress()}>