react-native - 反应原生 - 动态更新样式表值
问题描述
我想更新样式表属性“top”值。目前是“25”,我想将值更改为“0”或其他值。实际上,一旦用户单击“TextInput”,我想存档,“Text”将移动“TextInput”的顶部。
import React, {Component} from 'react';
import {View, Text, TextInput, StyleSheet } from 'react-native';
export default class InputBoxComponent extends Component{
constructor(props){
super(props);
this.state = {
'labelPosition':25
}
}
onFoucusHandler = () => {
this.state.labelPosition = 0
}
onBlurHandler = () => {
this.state.labelPosition = 25
}
render(){
return(
<View style={styles.container}>
<Text style={{
'color':'#7b858e',
'fontSize':12,
'top':this.state.labelPosition
}}>{this.props.label}</Text>
<TextInput style={styles.input} onFocus={this.onFoucusHandler} onBlur={this.onBlurHandler}/>
</View>
)
}
}
InputBoxComponent.defaultProps = {
'label':'Label',
'labelPosition': 25
}
const styles = StyleSheet.create({
container:{
paddingBottom: 10,
paddingTop: 10
},
input:{
borderBottomColor: '#ccc',
borderBottomWidth: 1,
paddingTop: 5,
paddingBottom: 5,
fontSize: 16
}
})
解决方案
你必须keyboardavoidingview
为此努力。
参考链接: https ://facebook.github.io/react-native/docs/keyboardavoidingview
推荐阅读
- xamarin - 应用程序在 UWP 中的 Windows 应用程序认证工具包中的验证应用程序中没有进展?
- python - 如何使用 Python 从 2 个 excel 中获取额外和遗漏的数据
- android - 停止处理程序线程
- ruby-on-rails - 编辑帖子时,我的照片字段不保存选择
- python-3.x - 我可以使用具有不同输入张量的相同模型吗?我应该避免多次运行 session.run() 吗?
- excel - 如何从excel文件中填写下拉列表
- c# - c# flags 属性枚举位组合如何工作?
- sql - Postgres日期问题
- c++ - 使用 C++ 和 Jsoncpp 从 AWS S3 解析 json 文件
- c - C: AF_UNIX 套接字上的剩余字节