Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput闪屏问题fix #50

Open
wuyunqiang opened this issue May 8, 2018 · 0 comments
Open

TextInput闪屏问题fix #50

wuyunqiang opened this issue May 8, 2018 · 0 comments
Labels
Component rn组件

Comments

@wuyunqiang
Copy link
Owner

wuyunqiang commented May 8, 2018

解决
方式一:

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

facebook/react-native#19085
facebook/react-native#18278

@wuyunqiang wuyunqiang added the Component rn组件 label May 17, 2018
@wuyunqiang wuyunqiang changed the title TextInput问题 TextInput闪屏问题fix Jun 1, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component rn组件
Projects
None yet
Development

No branches or pull requests

1 participant