响应本机输入文本动画,试图使其变为只读属性

时间:2019-01-27 07:44:50

标签: react-native

我想在React天真中使用浮动标签创建带有动画的自定义文本输入并使用此代码,但是当我单击文本输入时,此错误出现在android设备上。即时通讯使用反应本机0.57进行开发。

export default class FloatingLabelInput extends Component {
    state = {
        isFocused: false,
    };
    componentWillMount() {
        this._animatedIsFocused = new Animated.Value(this.props.value === '' ? 0 : 1);
    }
    handleFocus = () => this.setState({ isFocused: true });
    handleBlur = () => this.setState({ isFocused: false });
    componentDidUpdate() {
        Animated.timing(this._animatedIsFocused, {
            toValue: (this.state.isFocused || this.props.value !== '') ? 1 : 0,
            duration: 200,
        }).start();
    }
    render() {
        const {style, label, ...props} = this.props;
        const { isFocused } = this.state;
        const labelStyle = {
            position: 'absolute',
            right: 0,
            top: this._animatedIsFocused.interpolate({
                inputRange: [0, 1],
                outputRange: [16, 0],
            }),
            fontSize: this._animatedIsFocused.interpolate({
                inputRange: [0, 1],
                outputRange: [16, 14],
            }),
            color: this._animatedIsFocused.interpolate({
                inputRange: [0, 1],
                outputRange: ['#aaa', '#000'],
            }),

        };
        return (
            <View  style={{ height:60 }}>
                <Text style={labelStyle}>
                    {label}
                </Text>
                <TextInput
                    {...props}
                    style={style}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    blurOnSubmit
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    inputText:{
        textAlign:'right',
        height: 26,
        fontSize: 16,
        color: '#000',
        flex:1,


}

0 个答案:

没有答案