背景

偶然看到星巴克的app，android和ios版本体验感都非常好，尤其是登录注册界面的输入框，还是第一个看到这样的效果，所以赶紧山寨一个。

先上效果

screenshot.gif

特性

1、密码框输入
2、在获得焦点的时候改变分割线颜色
3、在失去焦点的时候判断输入
4、动画效果

系统要求

React版本 >= 16
支持ART

安装

yarn add react-native-animated-textinput

使用方法

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Animated,
  ScrollView,
  PixelRatio,
  TouchableHighlight
} from 'react-native';

import AnimatedInput from 'react-native-animated-textinput';

type Props = {};

export default class App extends Component < Props > {

  constructor(props) {
    super(props);
    this.state = {
      active: null
    };
  }

  render() {
    return (
      <ScrollView
        alwaysBounceVertical={false}
        keyboardDismissMode={'on-drag'}
        style={styles.container}>
        <View>
          <View style={{
            height: 100
          }}></View>
          <AnimatedInput
            valid={(text) => {
            if (!text) {
              return "请输入您的用户名或电子邮箱";
            }
            return null;
          }}
            placeHolder="用户名或电子邮箱"/>
          <AnimatedInput
            secureTextEntry={true}
            valid={(text) => {
            if (!text) {
              return "请输入您的密码";
            }
            return null;
          }}
            placeHolder="密码"/>
            <Text >忘记密码?</Text>
        </View>

      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 5,
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
});