Question

我来自react-background，刚开始从事React-Native项目。

同时，我的工作没有专门处理本机硬代码（更像是使用redux管理状态，将数据传递到前端等）

我仍在尝试理解同龄人之一编写的代码。

这是他通常写的内容（仅显示相关代码

from flask_migrate import Migrate

class Config(object):
    # ...
    SECRET_KEY = os.environ.get('SECRET_KEY') or os.urandom(12)
    USERNAME = os.environ.get('DB_USERNAME')
    PASSWORD = os.environ.get('DB_PASSWORD')
    URL = os.environ.get('DB_URL')
    if USERNAME:
        SQLALCHEMY_DATABASE_URI = 'postgresql+psycopg2://' + USERNAME + ':' + PASSWORD  + '@' + URL + ':5432/postgres'
    else:
        SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db')
    SQLALCHEMY_TRACK_MODIFICATIONS = False

server = Flask(__name__)
server.config.from_object(Config)

db = SQLAlchemy(server)
migrate = Migrate(server, db)

我无法理解此代码，由于某种原因，本机文档并不好。

所有似乎难以理解的东西。

第一：class Signup extends PureComponent { state = { email: '', password: '', errorMessage: null } constructor(props) { super(props); this.keyboardHeight = new Animated.Value(0); this.imageHeight = new Animated.Value(90); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: event.endCoordinates.height, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }), ]).start(); }; keyboardWillHide = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: 0, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }), ]).start(); }; handleLogin = () => { // TODO Using Redux } render() { const {email, password, fullName, username} = this.state; return ( <Animated.View style={{ paddingBottom: this.keyboardHeight, flex: 1 }}>

我们如何使用this.keyboardHeight = new Animated.Value(0);来设置键盘高度？

第二：他在我们的new Animated.Value(0);中完成了

componentWillMount() {

是将事件监听器分配/附加到componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); }和this.keyboardWillShowSub吗？每当我们显示或隐藏/键盘（对吗？）

第三步：该代码做什么？

this.keyboardWillHideSub

Answer 1

嗨，我会尽力让您了解这些代码行。

第一个this.keyboardHeight = new Animated.Value(0);-据我最初了解，当我们进入该特定页面时，我们不希望在componentDidMount上弹出动画键盘，这就是为什么动画值为0。

第二个我们在componentWillMount中提供这些方法，以便每当被称为componentWillMount的那些方法触发时，new Animated.Value(0);就会得到键盘高度，并且键盘会弹出（动画）。

第三，我假设开发人员打算同时更改键盘弹出窗口上的图像高度。

希望我所解释的内容使您了解了这些行的用途。

了解动画和键盘事件

1 个答案: