在 react-native 中更改 TextInput 焦点的 underlineColorAndroid

Posted 2023-02-22

【中文标题】在 react-native 中更改 TextInput 焦点的 underlineColorAndroid

【英文标题】：Change underlineColorAndroid on Focus for TextInput in react-native

【发布时间】：2016-11-08 07:45:51

【问题描述】：

类似于Focus style for TextInput in react-native，我正在尝试更改 textInput 的属性 underlineColorandroid。

我正在使用 React-Native 0.28.0

OnFocus，属性不变。如何将下划线更改为其他颜色 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);

【参考方案1】：

嗯，您的代码是正确的，应该可以正常工作。 Here is working example

请停止对这个答案投反对票。不幸的是 rnplay 服务不再可用，就像这个例子一样。或者投反对票，但请解释您的观点。

【讨论】：

感谢康斯坦丁。我将 RN 与 ES2016 一起使用，但它不适用于它。很快就会发布一个 rnplay 示例

实际上 ES6 版本应该可以正常工作。我猜你遇到了组件类定义的典型问题，我说的是没有方法的自动绑定 - explanation of differences between methods of creating components 我已经用 es6 语法更新了我的示例，查看它。

@Slowyn 链接坏了