TextInput闪屏问题fix

[wuyunqiang]

解决 方式一：

class Input extends Component{
    constructor(){
        super();
        this.amount=0;
    }
    componentWillReceiveProps(nextProps) {
        if(this.props.amount!=nextProps.amount){
            this._textInput&&this._textInput.setNativeProps({text: nextProps.amount});//重点
        }
    }
    setAmout = (text)=>{
        this.amount = text;
    };

    getAmout = ()=>{
        this.props.getAmout&&this.props.getAmout(this.amount);
    };

    render(){
        return (<View style={styles.inputStyle}>
          <TextInput
                    ref={component => this._textInput = component}
                    numberOfLines={1}
                    underlineColorAndroid={'transparent'}
                    style={{padding:0,backgroundColor:'white',width:SCALE(400)}}
                    maxLength={10}
                    keyboardType = {'numeric'}
                    onChangeText={this.setAmout}
                    onEndEditing={this.getAmout}
                />
        </View>)
    }
}

方式二：

class Input extends Component{
    constructor(){
        super();
        this.state = {
            amount:0,
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log('Input nextProps',nextProps)
        this.setState({
            amount: nextProps.amount,
        })
    }

    setAmount = (text)=>{
       this.setState({
           amount:text
       })
    };

    getAmount = ()=>{
       this.props.getAmount&&this.props.getAmount(this.state.amount);
    };

    render(){
        return (<View style={styles.inputStyle}>
              <TextInput
                    style={{backgroundColor:'white',width:SCALE(400)}}
                    maxLength={10}
                    keyboardType = {'numeric'}
                    onChangeText={this.setAmount}
                    onEndEditing={this.getAmount}
                    value={this.state.amount}
                />
        </View>)
    }
}

use:

 <Input getAmout = {this.getAmount} amount = {this.state.amount}/>

https://github.com/facebook/react-native/issues/19085 https://github.com/facebook/react-native/pull/18278