From 2f7f2e13f16cbf52f8ac1912a177c1288ae87e41 Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Sat, 5 Dec 2020 19:50:53 +0800
Subject: [PATCH] fix(YooLogin): avoid input from being hidden under virtual
 keyboard

For some reason, components is not reachable as children of `Animated.View`, so I create some Animated components to replace the originals.
---
 README.md            |  2 +-
 src/ui/YooLoginUI.js | 71 +++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index a7cd94e..4899d49 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@
 
 ## 📄 TODO
 
-- [ ] 弹出键盘不遮挡输入框
+- [x] 弹出键盘不遮挡输入框
 - [ ] ~~根据像素比例设置登录背景图片大小~~
 - [x] 添加应用图标
 - [ ] 适配 iOS 登录失败 toast
diff --git a/src/ui/YooLoginUI.js b/src/ui/YooLoginUI.js
index 2bb6132..0989653 100644
--- a/src/ui/YooLoginUI.js
+++ b/src/ui/YooLoginUI.js
@@ -8,6 +8,8 @@ import {
   Text,
   ActivityIndicator,
   ToastAndroid,
+  Animated,
+  Keyboard,
 } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -45,15 +47,37 @@ const styles = StyleSheet.create({
     fontSize: 26,
   },
 });
+const AnimatedInput = Animated.createAnimatedComponent(TextInput);
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
 
 export default class YooLoginUI extends Component {
   constructor(props) {
     super(props);
     this.state = {
       loading: false,
+      translateY: new Animated.Value(0),
     };
     this.onButtonPress = this.onButtonPress.bind(this);
     this.onLoginFailed = this.onLoginFailed.bind(this);
+    this.onKeyboardDidShow = this.onKeyboardDidShow.bind(this);
+    this.onKeyboardDidHide = this.onKeyboardDidHide.bind(this);
+  }
+
+  componentDidMount() {
+    this.keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      this.onKeyboardDidShow,
+    );
+    this.keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      this.onKeyboardDidHide,
+    );
+  }
+
+  componentWillUnmount() {
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListener.remove();
   }
 
   onButtonPress() {
@@ -68,31 +92,64 @@ export default class YooLoginUI extends Component {
     ToastAndroid.show(hint, ToastAndroid.SHORT);
   }
 
+  onKeyboardDidShow() {
+    Animated.timing(this.state.translateY, {
+      toValue: -320,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }
+
+  onKeyboardDidHide() {
+    Animated.timing(this.state.translateY, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }
+
   render() {
     return (
       <View style={styles.container}>
-        <Image source={require('../../assets/icon.png')} style={styles.logo} />
-        <TextInput
-          style={styles.input}
+        <AnimatedImage
+          source={require('../../assets/icon.png')}
+          style={[
+            styles.logo,
+            {transform: [{translateY: this.state.translateY}]},
+          ]}
+        />
+        <AnimatedInput
+          style={[
+            styles.input,
+            {transform: [{translateY: this.state.translateY}]},
+          ]}
           placeholder={'账号'}
           maxLength={10}
           value={this.props.username}
           onChangeText={(username) => this.props.setUsername(username)}
         />
-        <TextInput
-          style={styles.input}
+        <AnimatedInput
+          style={[
+            styles.input,
+            {transform: [{translateY: this.state.translateY}]},
+          ]}
           placeholder={'密码'}
           secureTextEntry={true}
           value={this.props.password}
           onChangeText={(password) => this.props.setPassword(password)}
         />
-        <TouchableOpacity style={styles.button} onPress={this.onButtonPress}>
+        <AnimatedTouchableOpacity
+          style={[
+            styles.button,
+            {transform: [{translateY: this.state.translateY}]},
+          ]}
+          onPress={this.onButtonPress}>
           {this.state.loading ? (
             <ActivityIndicator size="large" color="#00ff00" />
           ) : (
             <Text style={styles.buttonText}>登录</Text>
           )}
-        </TouchableOpacity>
+        </AnimatedTouchableOpacity>
       </View>
     );
   }