转载

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

React Native Textinput Effects

I've come across with those beautiful text inputs created and blogged by Coderops and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native.

There is also a native iOS library calledTextFieldEffects which has built some of them in Swift.

Installation

$ npm install react-native-textinput-effects --save

You also need to install react-native-vector-icons if you'd like to use a TextInputEffect component with an icon. Please check outInstallation section on that project.

How to use

Common Props

Prop	Type	Description
`label`	String	Displayed as placeholder string of the input.
`style`	View Style Object	Applied to the root container of the input.
`labelStyle`	View Style Object	Applied to the container of the label view.
`inputStyle`	Text Style Object	Applied to the TextInput component.

You can also use TextInput Props . They'll be passed into TextInput component.

Props for TextInputEffects with an Icon

This component needs Icon component from react-native-vector-icons to operate with icons. You should import it before creating a TextInputEffects component.

import Icon from 'react-native-vector-icons/FontAwesome';

Prop	Type	Description
`iconClass`	Object	The Icon component class you've imported from react-native-vector-icons.
`iconName`	String	Name of the icon that is passed to Icon component.
`iconColor`	String	Applied to the container of the label view.
`inputStyle`	Text Style Object	Applied to the TextInput component.

Example

See TextInputEffectsExample.js file.

Follow those steps to run the example:

Clone the repo git clone https://github.com/halilb/react-native-textinput-effects && cd react-native-textinput-effects/Example
Install dependencies npm install `
Follow official instructions to run the example project in a simulator or device.

You can also check out the example library without any installation on Appetize.io !

Input Types

Sae

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import { Sae } from 'react-native-textinput-effects';  const saeInput = (   <Sae     label={'Email Address'}     iconClass={FontAwesomeIcon}     iconName={'pencil'}     iconColor={'white'}     // TextInput props     autoCapitalize={'none'}     autoCorrect={false}   /> );

Fumi

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import { Fumi } from 'react-native-textinput-effects';  const fumiInput = (   <Fumi     label={'Course Name'}     iconClass={FontAwesomeIcon}     iconName={'university'}     iconColor={'#f95a25'}   /> );

Kohana

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import MaterialsIcon from 'react-native-vector-icons/MaterialIcons'; import { Kohana } from 'react-native-textinput-effects';  const kohanaInput = (   <Kohana     style={{ backgroundColor: '#f9f5ed' }}     label={'Line'}     iconClass={MaterialsIcon}     iconName={'directions-bus'}     iconColor={'#f4d29a'}     labelStyle={{ color: '#91627b' }}     inputStyle={{ color: '#91627b' }}   /> );

Makiko

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import { Makiko } from 'react-native-textinput-effects';  const makikoInput = (   <Makiko     label={'Comment'}     iconClass={FontAwesomeIcon}     iconName={'comment'}     iconColor={'white'}     inputStyle={{ color: '#db786d' }}   /> );

Note: Icon component expands and covers the input. So, the icon should not have any blank spaces for the animation experience. This is the limitation for Makiko.

Isao

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import { Isao } from 'react-native-textinput-effects';  const isaoInput = (   <Isao     label={'First Name'}     // this is applied as active border and label color     activeColor={'#da7071'}     // this is applied as passive border and label color     passiveColor={'#dadada'}   /> );

Hoshi

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import { Hoshi } from 'react-native-textinput-effects';  const hoshiInput = (   <Hoshi     label={'Town'}     // this is used as active border color     borderColor={'#b76c94'}     // this is used to set backgroundColor of label mask.     // please pass the backgroundColor of your TextInput container.     backgroundColor={'#F9F7F6'}   /> );

Jiro

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import { Jiro } from 'react-native-textinput-effects';  const jiroInput = (   <Jiro     label={'Dog/'s name'}     // this is used as active and passive border color     borderColor={'#9b537a'}     inputStyle={{ color: 'white' }}   /> );

Kaede

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import { Kaede } from 'react-native-textinput-effects';  const kaedeInput = (   <Kaede     label={'Website'}   /> );

Akira

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import { Akira } from 'react-native-textinput-effects';  const akiraInput = (   <Akira     label={'First Name'}     // this is used as active and passive border color     borderColor={'#a5d1cc'}     labelStyle={{ color: '#ac83c4' }}   /> );

Madoka

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import { Madoka } from 'react-native-textinput-effects';  const madokaInput = (   <Madoka     label={'Frequency'}     // this is used as active and passive border color     borderColor={'#aee2c9'}     labelStyle={{ color: '#008445' }}     inputStyle={{ color: '#f4a197' }}   /> );

Hideo

[React Native] 一个用纯 js 实现的有非常多炫酷效果的 TextInput

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import { Hideo } from 'react-native-textinput-effects';  const hideoInput = (   <Hideo     iconClass={FontAwesomeIcon}     iconName={'envelope'}     iconColor={'white'}     // this is used as backgroundColor of icon container view.     iconBackgroundColor={'#f2a59d'}     inputStyle={{ color: '#464949' }}   /> );