68      技術社區[雲棲]

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;

最後更新：2017-06-27 22:32:13

  上一篇：  一鍵領取阿裏雲幸運券 隨機享受阿裏雲優惠折扣

  下一篇：  centos 7 安裝配置ftp服務