QAP实践:响应键盘显示、隐藏和其它高度变化事件

简介:
'use strict';

import {createElement, Component, render, findDOMNode} from 'rax';
import {Link, View, Text, Input, TextInput, ScrollView, Button, Transition} from 'nuke';
import QN from 'QAP-SDK';

class QAPKeyboardDemo extends Component {
    constructor(props) {
        super(props);

        this.state = {'viewBottom':'0'};

        QN.navigator.setTitle({
            query:{
                title: 'QAP键盘实践'
            }
        });

        QN.on('Global.KeyboardWillShow', (data) => {
            console.log('Global.KeyboardWillShow data : ', data);
            this.setState({viewBottom:data.height});

            // var orangeView = findDOMNode('orangeView');
            // console.log('orangeView : ', orangeView);
            // Transition(orangeView, {'transform':'translateY(-600)'}, {
            //     timingFunction: 'linear',
            //     delay: 0,
            //     duration: data.duration
            // }, function() {
            //     console.log('Transition done.');
            // });
        });

        QN.on('Global.KeyboardWillHide', (data) => {
            console.log('Global.KeyboardWillHide data : ', data);
            this.setState({viewBottom:data.height});
        });

        QN.on('Global.KeyboardWillChangeFrame', (data) => {
            console.log('Global.KeyboardWillChangeFrame data : ', data);
            this.setState({viewBottom:data.height});
        });
    }
    
    render() {
        return (
            <ScrollView style={styles.container} onScroll={this.hideKeyboard}>
                <TextInput 
                    ref='TextInput1' onInput={this.onInput}
                    style={styles.textInput} 
                    placeholder="请输入1" 
                    multiple={true}
                    value={this.state.inputValue}>
                </TextInput>
                <View id='orangeView' style={{backgroundColor:'orange', height:'100rem', position:'fixed', bottom:this.state.viewBottom}}>跟随键盘移动</View>
            </ScrollView>
        );
    }
}

const styles = {
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },

    textInput: {
        borderStyle: 'solid',
        borderColor: 'lightblue',
        borderWidth: '1rem',
        width: '600rem',
        height: '200rem',
        'margin':'40rem'
    },
}

render(<QAPKeyboardDemo/>)

export default QAPKeyboardDemo;

qapkeyboard

目录
相关文章
UIKeyboardWillShowNotification 监听键盘高度变化
<span style="font-family:courier new,courier,monospace; outline:none; line-height:1.5em; color:rgb(51,51,51); font-size:14px"><span style="font-size:18px; outline:none; line-height:1.5em">UIKeyboa
1387 0
C#如何在Form启动时控制焦点落在某一个控件上?
     在C#中新建一个窗体应用程序。如图,从工具箱向窗体(Form1)中依次拖入button1、button2、button3、button4。     运行后,Form1的焦点会自动落在button1上。
812 0
|
9月前
|
定位技术 iOS开发
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
63 0
|
JavaScript 前端开发
JavaScript时间戳获取及时间戳判断(同时设置不同的颜色。已开始的事件显示绿色,未开始的事件显示黑色,过去的事件显示灰色)
JavaScript时间戳获取及时间戳判断(同时设置不同的颜色。已开始的事件显示绿色,未开始的事件显示黑色,过去的事件显示灰色)
130 0
|
4月前
ThreeJs控制模型的隐藏与显示
这篇文章讲解了如何在Three.js中通过代码控制3D模型的显示与隐藏状态。
62 3
ThreeJs控制模型的隐藏与显示
|
JSON 小程序 Android开发
小程序列表左滑效果在IOS呈上下滑动影响样式
小程序列表左滑效果在IOS呈上下滑动影响样式
138 0
|
编解码 前端开发 UED
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。
436 0
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)

热门文章

最新文章