加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

更改underlineColorAndroid on Focus for TextInput in react-na

发布时间:2020-12-15 09:34:25 所属栏目:百科 来源:网络整理
导读:与 Focus style for TextInput in react-native类似,我正在尝试为textInput更改属性underlineColorAndroid. 我使用的是React-Native 0.28.0 OnFocus,属性不会更改.如何在焦点上将下划线更改为其他颜色? 我的示例代码如下: 'use strict';import React,{ Com
与 Focus style for TextInput in react-native类似,我正在尝试为textInput更改属性underlineColorAndroid.

我使用的是React-Native 0.28.0

OnFocus,属性不会更改.如何在焦点上将下划线更改为其他颜色?

我的示例代码如下:

'use strict';

import React,{ Component } from 'react';

import {
  AppRegistry,StyleSheet,Text,View,TextInput,ScrollView
} from 'react-native';

class RNPlayground extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasFocus: false
    }
  }

  _onBlur() {
    this.setState({hasFocus: false});
    }

  _onFocus() {
    this.setState({hasFocus: true});
    }

  _getULColor(hasFocus) {
    console.error(hasFocus);
    return (hasFocus === true) ? 'pink' : 'violet';
  }

  render() {
    console.error("this.state=");
    console.error(this.state);
    console.error("this.state.hasFocus=");
    console.error(this.state.hasFocus);

    return (
      <View style={styles.container}>
        <ScrollView>
          <TextInput
            placeholder="textInput"
            onBlur={ () => this._onBlur() }
            onFocus={ () => this._onFocus() }
            style={styles.instructions}
            underlineColorAndroid={this._getULColor(this.state.hasFocus)}/>
                </ScrollView>
        <TextInput>Some sample text</TextInput>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
    fontSize: 28,textAlign: 'center',margin: 10,instructions: {
    textAlign: 'center',color: '#333333',fontSize: 19,marginBottom: 5,}

});

AppRegistry.registerComponent('RNPlayground',() => RNPlayground);

解决方法

那么,你的代码是正确的,它应该正常工作.
Here is working example

请停止投票给这个答案.不幸的是,rnplay服务不再可用,就像这个例子一样.或者downvote但是解释你的观点.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读