我想更新stylesheet属性“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
}
})
你可以替换
this.state.labelPosition = 0
同
this.setState({labelPosition:0})
还看看像Native Base https://docs.nativebase.io/Components.html#floating-label-headref这样的库,我认为浮动标签可以做你想要实现的目标。
你必须为此尝试keyboardavoidingview
。
参考链接:https://facebook.github.io/react-native/docs/keyboardavoidingview