覆盖 TextInput 中的设置样式操作

Question

我发现 react native 可以扩展父类并覆盖某些功能。我想知道是否有可能或有其他方法。

export default class AppTextInput extends TextInput {

    constructor(props){
       super(props);
    }

    //here is some code I want to do
    style(value){

        var fontSize = value.fontSize;

        //change fontSize
        fontSize = fontSize*2;

        value.fontSize = fontSize;

       //call parent set style function

    }


}

在actionscript 3中，我可以这样做

//do something when visible was set
override public function set visible(value:Boolean):void
{
}

编辑

    hasTriggleFontSizeChange = false;

    realFontSize = 12;

    componentWillMount() {
        var tempStyle = this.props.style;

        if (!this.hasTriggleFontSizeChange) {
            this.hasTriggleFontSizeChange = true;

            var tempFontSize = 6;

            if (tempStyle.hasOwnProperty('fontSize')) {
                tempFontSize = tempStyle['fontSize'];
            }

            tempFontSize = 12;

            var style = {fontSize: tempFontSize};

            let styles = this.props.style;

            //this line can change styles fontSize Value
            styles = {...styles, fontSize: tempFontSize};

            //but this line can't change styles fontSize Value
             this.props.style = styles//{...this.props.style, fontSize: tempFontSize};
        }

    }

Answer 1

你不应该使用继承，而应该使用组合。如果您想要自定义 TextInput，以下是您如何实现该目标的示例：

import React, { Component } from 'react';
import { TextInput } from 'react-native';

export default class CustomTextInput extends Component {
  state = {}

  render() {
    const { props } = this;
    const style = { fontSize: props.fontSize || 14 }
    return (
      <View style={myStyle}>
        <TextInput
          style={style}
          placeholder={props.placeholder}
          underlineColorAndroid="transparent"
          value={props.value}
          placeholderTextColor={props.placeholderTextColor ? props.placeholderTextColor : colors.lightGray}
        />
      </View >
    );
  }

}