覆盖 TextInput 中的设置样式操作

Question

我发现 React Native 可以扩展父级 class 并覆盖一些 function.I 想知道这是否可行或是否有其他方法可以做到。

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 >
    );
  }

}

覆盖 TextInput 中的设置样式操作

override set style action in TextInput

styles

textinput

react-native