反应原生 - 动态更新样式表值答案

【问题标题】：react native - update stylesheet value dynamically反应原生 - 动态更新样式表值
【发布时间】：2018-09-18 06:57:06
【问题描述】：

我想更新样式表属性“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
  }
})

【问题讨论】：

标签： react-native stylesheet

【解决方案1】：

你可以替换

this.state.labelPosition = 0

与

this.setState({labelPosition:0})

还可以查看 Native Base 之类的库 https://docs.nativebase.io/Components.html#floating-label-headref 我认为浮动标签可以完成您想要实现的目标。

【讨论】：

这对我有用，非常感谢@maximumLasagna

【解决方案2】：

您必须为此尝试keyboardavoidingview。

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

【讨论】：