如何使用react-native显示键盘时向上移动视图

时间:2015-11-04 10:58:50

标签: react-native

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>
      )
  }
}

当我尝试这样的填充显示视图的顶部,但我希望视图向上移动键盘如图所示,可以任何人给我建议如何解决这个,任何帮助非常感激

0 个答案:

没有答案