多说不如多撸:
/**
* Created by shaotingzhou on 2017/2/23.
*/
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Keyboard,
TextInput,
Dimensions
} from 'react-native';
var ScreenWidth = Dimensions.get('window').width;
export default class Root extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
keyboardHeight:0
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{' '}
Shake or press menu button for dev menu
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{' '}
Shake or press menu button for dev menu
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{' '}
Shake or press menu button for dev menu
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{' '}
Shake or press menu button for dev menu
</Text>
<TextInput
style={{ScreenWidth,height:100,borderWidth:2,marginBottom:this.state.keyboardHeight}}
/>
</View>
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
_keyboardDidShow(e){
this.setState({
keyboardHeight:e.startCoordinates.height
})
}
_keyboardDidHide(e){
this.setState({
keyboardHeight:0
})
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
效果:
额.后来发现个KeyboardAvoidingView,原来react native已经意识到了.所以上面的代码可以作废.使用新的KeyboardAvoidingView,其中
KeyboardAvoidingView的主要属性behavior 包含三个'height', 'position', 'padding'
大致代码如下:
1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * @flow 5 */ 6 7 import React, { Component } from 'react'; 8 import { 9 AppRegistry, 10 StyleSheet, 11 Text, 12 View, 13 ScrollView, 14 TextInput, 15 KeyboardAvoidingView 16 } from 'react-native'; 17 18 export default class Root extends Component { 19 render() { 20 return ( 21 <KeyboardAvoidingView behavior='position' > 22 <ScrollView> 23 <View style={styles.container}> 24 <Text style={styles.welcome}> 25 Welcome to React Native! 26 </Text> 27 <Text style={styles.instructions}> 28 To get started, edit index.ios.js 29 </Text> 30 <Text style={styles.instructions}> 31 Press Cmd+R to reload,{' '} 32 Cmd+D or shake for dev menu 33 </Text> 34 <Text style={styles.welcome}> 35 Welcome to React Native! 36 </Text> 37 <Text style={styles.instructions}> 38 To get started, edit index.ios.js 39 </Text> 40 <Text style={styles.instructions}> 41 Press Cmd+R to reload,{' '} 42 Cmd+D or shake for dev menu 43 </Text> 44 <Text style={styles.welcome}> 45 Welcome to React Native! 46 </Text> 47 <Text style={styles.instructions}> 48 To get started, edit index.ios.js 49 </Text> 50 <Text style={styles.instructions}> 51 Press Cmd+R to reload,{' '} 52 Cmd+D or shake for dev menu 53 </Text> 54 <Text style={styles.welcome}> 55 Welcome to React Native! 56 </Text> 57 <Text style={styles.instructions}> 58 To get started, edit index.ios.js 59 </Text> 60 <Text style={styles.instructions}> 61 Press Cmd+R to reload,{' '} 62 Cmd+D or shake for dev menu 63 </Text> 64 <Text style={styles.welcome}> 65 Welcome to React Native! 66 </Text> 67 <Text style={styles.instructions}> 68 To get started, edit index.ios.js 69 </Text> 70 <Text style={styles.instructions}> 71 KeyboardAvoidingView的主要属性behavior PropTypes.oneOf(['height', 'position', 'padding']) 72 </Text> 73 <TextInput 74 placeholder="输入框" 75 style={{300,height:100,borderWidth:1}} 76 /> 77 </View> 78 </ScrollView> 79 </KeyboardAvoidingView> 80 ); 81 } 82 } 83 84 const styles = StyleSheet.create({ 85 container: { 86 flex: 1, 87 justifyContent: 'center', 88 alignItems: 'center', 89 backgroundColor: '#F5FCFF', 90 }, 91 welcome: { 92 fontSize: 20, 93 textAlign: 'center', 94 margin: 10, 95 }, 96 instructions: { 97 textAlign: 'center', 98 color: '#333333', 99 marginBottom: 5, 100 }, 101 });
效果:
