переопределить действие установленного стиля в TextInput - PullRequest
Новая
       54

переопределить действие установленного стиля в TextInput

0 голосов
/ 17 декабря 2018

Я обнаружил, что реагировать на нативный может расширение родительского класса и переопределить некоторую функцию. Я хочу знать, возможно ли это или есть другой способ сделать это. 

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

    }

1 Ответ

0 голосов
/ 17 декабря 2018

Вы не должны использовать наследование, а скорее состав.Если вы хотите иметь собственный 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 >
    );
  }

}
...