native-keyboardevents用于在键盘显示时向上移动视图,我写了这样的代码
var KeyboardEvents = require('react-native-keyboardevents');
var KeyboardEventEmitter = KeyboardEvents.Emitter;
class Account extends React.Component{
constructor(props, context){
super(props);
this.state = {
keyboardSpace: 0,
isKeyboardOpened: false
};
}
updateKeyboardSpace(frames){
this.setState({
keyboardSpace: frames.end.height,
isKeyboardOpened: true
});
}
resetKeyboardSpace(){
this.setState({
keyboardSpace: 0,
isKeyboardOpened: false
});
}
componentDidMout(){
KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);
}
componentWillunmount(){
KeyboardEventEmitter.off(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
KeyboardEventEmitter.off(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);
}
render() {
var paddingTop = 110 - this.state.keyboardSpace /3;
return (
<View style={styles.container}>
<View style={[styles.header,{paddingTop: paddingTop}]}>
<Image style={styles.image} source={require('image!pic1')} />
</View>
<View style={styles.main}>
<Text style={styles.joinNow}>Join Now</Text>
<TouchableHighlight style={styles.sub} >
<Text style={styles.signin}>Sign In</Text>
</TouchableHighlight>
</View>
<View style={styles.body}>
<View style={styles.inputContainer}>
<Image style={styles.inputUsername} source={require('image!mail')}/>
<TextInput
style={styles.email}
value={this.state.email}
placeholder="Email"/>
</View>
<View style={styles.inputContainer}>
<Image style={styles.inputPassword} source={require('image!locker')}/>
<TextInput
password={true}
style={styles.email}
value={this.state.password}
placeholder="Password"/>
</View>
<View>
<TouchableHighlight style={styles.button}>
<Text style={styles.buttonText}>JOIN</Text>
</TouchableHighlight>
</View>
</View>
</View>
)
}
}
当我尝试这样的填充显示视图的顶部,但我希望视图向上移动键盘如图所示,可以任何人给我建议如何解决这个,任何帮助非常感激