'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;
相关资源：敏捷开发V1.0.pptx
