react native 输入框TextInput .....效果

ipar_input.gif

只是普通的几行代码而已，所以我不说太多。直接用就OK了

使用方式：

......



.....

IparInput:

import React, {Component} from 'react'
import {TextInput, Text, Platform, UIManager, LayoutAnimation, StyleSheet, View} from "react-native";

export default class IparInput extends Component {

    constructor(props) {
        super(props);
        this.inputValue = '';
        this.state = {
            isFocused: false,
            marginBottom: 0,
        }
    }


    propTypes: {
        ...ViewPropTypes,
        /**
         * If `true`, focuses the input on `componentDidMount`.
         * The default value is `false`.
         */
        autoFocus: PropTypes.bool,
        /**
         * Limits the maximum number of characters that can be entered. Use this
         * instead of implementing the logic in JS to avoid flicker.
         */
        maxLength: PropTypes.number,
        /**
         * Sets the number of lines for a `TextInput`. Use it with multiline set to
         * `true` to be able to fill the lines.
         * @platform android
         */
        numberOfLines: PropTypes.number,
        /**
         * Callback that is called when the text input's text changes.
         */
        onChange: PropTypes.func,
        /**
         * Callback that is called when the text input's text changes.
         * Changed text is passed as an argument to the callback handler.
         */
        onChangeText: PropTypes.func,
        /**
         * Invoked on mount and layout changes with `{x, y, width, height}`.
         */
        onLayout: PropTypes.func,
        /**
         * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
         * May also contain other properties from ScrollEvent but on Android contentSize
         * is not provided for performance reasons.
         */
        onScroll: PropTypes.func,
        /**
         * The string that will be rendered before text input has been entered.
         */
        placeholderText: PropTypes.node,
        /**
         * The text color of the placeholder string.
         */
        placeholderTextColor: ColorPropType,
        /**
         * If `true`, the text input obscures the text entered so that sensitive text
         * like passwords stay secure. The default value is `false`.
         */
        secureTextEntry: PropTypes.bool,
        /**
         * The highlight and cursor color of the text input.
         */
        selectionColor: ColorPropType,


        /**
         *是否密码输入框
         */
        isPassword: PropTypes.bool,

    };


    startAnim(isFocused) {
        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true);
        }
        /**
         * 动画效果
         */
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);


        let _marginValue = isFocused || this.inputValue.trim() ? 30 : 0;


        this.setState({
            marginBottom: _marginValue,
            isFocused: isFocused,
        })
    }

    render() {

        let state = this.state;


        return 

            
                
                    {this.props.placeholderText}
                
            
             {
                    this.inputValue = text;
                    this.props.onChangeText && this.props.onChangeText(text);
                }}
                {...this.props}
                onBlur={() =>
                    this.startAnim(false)
                }
                onFocus={() => {
                    this.startAnim(true)
                }}
                secureTextEntry={this.props.isPassword === true}
                underlineColorAndroid='transparent'
                style={styles.input}
            />

            
        
    }
}
const styles = StyleSheet.create({
    input: {
        height: 40,
        width: '100%',
        textAlign: 'left',
    },
    inputBox: {
        height: 60,
        justifyContent: 'flex-end',

        borderColor: 'gray',
    },
    placeholderBox: {
        backgroundColor: 'transparent',
        justifyContent: 'flex-end',
        position: 'absolute',
        left: 0,
        right: 0,
    }
});