react native 之 获取键盘高度
2024-08-25 12:57:45
多说不如多撸:
/**
* 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'
大致代码如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
TextInput,
KeyboardAvoidingView
} from 'react-native'; export default class Root extends Component {
render() {
return (
<KeyboardAvoidingView behavior='position' >
<ScrollView>
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
KeyboardAvoidingView的主要属性behavior PropTypes.oneOf(['height', 'position', 'padding'])
</Text>
<TextInput
placeholder="输入框"
style={{width:300,height:100,borderWidth:1}}
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
);
}
} 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,
},
});
效果:
最新文章
- magento中某个商店实现部分样式
- 多线程系列 线程池ThreadPool
- sql with(lock) 与事务
- 在Ubuntu下配置Apache多域名服务器
- [深入React] 8.refs
- appium安装 For windows
- html5基础的常用的技巧
- 安装Keras
- Jmeter——HTTP协议的接口压力测试环境搭建
- 消息队列MQ对比
- 招聘IT图书兼职作者（长期兼职）
- C#版 - 剑指offer 面试题9：斐波那契数列及其变形(跳台阶、矩形覆盖) 题解
- 题解-AtCoder Code-Festival2017qualA-E Modern Painting
- Vmware 虚拟机无法启动
- C++学习（一）之Visual Studio安装以及首次使用
- 找进程的窗口Handle
- 二叉树 遍历 先序 中序 后序 深度 广度 MD
- 测试SDWebImage淡入淡出效果在UITableView中的重用显示问题
- Whitecoin区块链钱包高级功能使用命令
- java - 百钱百鸡小算法