Native解决键盘遮挡问题（Keyboard遮挡问题）(2)

import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Animated, } from 'react-native'; import SendEmail from './SendEmail'; export default class DrawLayout extends Component { constructor(props){ super(props); this.state={ kbShowY: new Animated.Value(0),//设置动画的初始值 }; global.drawLayout = this;//这里将自己保存到global里面，方便它的子组件调用 } setKBMoveY(y){ Animated.timing(//这里用的是timing均匀变化，具体的参数，可以参考RN的文档，写的很详细了，这里就不啰嗦了。 this.state.kbShowY,{ toValue: y,//变化到目的位置 delay: 250,//延时250毫秒 }, ).start();//开始 } componentWillUnmount() { global.drawLayout = null;//降这个值赋值为空 } render() { return ( <Animated.View style={[styles.container, {marginTop: this.state.kbShowY}]} >//使用Animated.View <SendEmail style={{marginTop: 10}}/> </Animated.View> ); } }

这就大功告成了。接着截图看看效果，虽然有动画，没法弄动态图