Merge pull request #2 from yongqianvip/dev

修复安卓端ActionSheet在UI方面的问题

Author: yongqianvip

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-overlayer",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"scripts": {
 		"start": "node node_modules/react-native/local-cli/cli.js start",
 		"test": "jest"

src/ActionSheet.js

@@ -14,27 +14,26 @@ const borderRadius = 12;
 class ActionSheet extends React.Component {
   constructor(props){
     super(props);
-    const {options, buttons} = props
     this.state = {
-      actionSheetTop: new Animated.Value(options.itemHeight * buttons.length + 8 + options.itemHeight)
+      actionSheetTop: new Animated.Value(DeviceConst.height) // 默认组件在屏幕（底部）外
     }
     this.renderButtonItem = this.renderButtonItem.bind(this);
     this.hideActionSheet = this.hideActionSheet.bind(this);
     DeviceEventEmitter.addListener("hide-actionSheet", this.hideActionSheet);
   }
   componentDidMount(){
-    Animated.timing(this.state.actionSheetTop, {
-			toValue: -(DeviceConst.dangerBottomHeight + 10),
+    const {options, buttons} = this.props
+    Animated.timing(this.state.actionSheetTop, { // 以动画的形式从下往上弹出actionSheet
+			toValue: DeviceConst.height - DeviceConst.dangerBottomHeight - (buttons.length + 1) * options.itemHeight - 8 - (DeviceConst.isAndroid ? 20 : 10) ,
 			duration: 300,
 		}).start();
   }
   componentWillUnmount(){
     DeviceEventEmitter.removeAllListeners("hide-actionSheet");
   }
   hideActionSheet(callback){
-    const {options, buttons} = this.props
     Animated.timing(this.state.actionSheetTop, {
-			toValue: options.itemHeight * buttons.length + 8 + options.itemHeight,
+			toValue: DeviceConst.height,
 			duration: 300,
 		}).start(callback ? callback : null);
   }

src/RRCActionSheet.js

@@ -60,7 +60,7 @@ export default class OverlayActionSheet {
     let key;
     const backgroundColor = ActionSheetOptions.backgroundColor && typeof ActionSheetOptions.backgroundColor == 'string' ? ActionSheetOptions.backgroundColor : defaultBackgroundColor
     const overlayView = (
-      <TouchableOpacity activeOpacity={1} type={'actionSheet'} style={{ width, height, backgroundColor: backgroundColor, alignItems: 'center', justifyContent: 'flex-end',}} onPress={()=>{
+      <TouchableOpacity activeOpacity={1} type={'actionSheet'} style={{ width, height, backgroundColor: backgroundColor, alignItems: 'center'}} onPress={()=>{
         DeviceEventEmitter.emit("hide-actionSheet", ()=>{
           RRCTopView.removeAlert(key);
         });