动态更新样式表值

Question

我想更新样式表属性"top"值。目前是"25"，我想将值更改为"0"或其他什么。实际上，我想存档，一旦用户单击"文本输入"，"文本"将移动"文本输入"的小顶部。

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

Answer 1

你可以替换

this.state.labelPosition = 0 

跟

this.setState({labelPosition:0})

还可以看看像原生基地这样的库 https://docs.nativebase.io/Components.html#floating-label-headref 我认为浮动标签可以做到你想要实现的目标。

Answer 2

您必须为此尝试keyboardavoidingview。

参考链接： https://facebook.github.io/react-native/docs/keyboardavoidingview