react native 之 获取键盘高度
多说不如多撸:
/**
* 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,{'\n'}
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,{'\n'}
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,{'\n'}
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,{'\n'}
Shake or press menu button for dev menu
</Text>
<TextInput
style={{width: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,{'\n'}
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,{'\n'}
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,{'\n'}
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,{'\n'}
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={{width: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 });
效果:
以上是 react native 之 获取键盘高度 的全部内容， 来源链接： utcz.com/z/384464.html
