在React Native中,如何更改TextInput获取焦点时的underlineColorAndroid?

4

类似于React-Native中TextInput的焦点样式,我试图更改textInput的underlineColorAndroid属性。

我使用的是React-Native 0.28.0版本。

当获得焦点时,该属性不会更改。我如何在获取焦点时将下划线改为其他颜色?

以下是我的示例代码:

'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);
1个回答

0

嗯,你的代码是正确的,应该可以正常工作。 这里有一个可行的示例

请不要再对这个答案进行负面评价了。不幸的是,rnplay服务已经不再可用,就像这个示例一样。或者你可以继续负面评价,但请解释一下你的观点。


谢谢Konstantin。我正在使用带有ES2016的RN,但它不起作用。稍后会发布一个rnplay示例。 - bschandramohan
1
实际上,ES6版本应该完全可以工作。我猜你遇到了组件类定义的典型问题,也就是方法不会自动绑定的问题——(创建组件方法的差异解释请参考:https://facebook.github.io/react/docs/reusable-components.html#es6-classes)。我已经用ES6语法更新了我的示例,请查阅。 - Slowyn
@Slowyn 链接已经失效。 - Vishnu T B

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接