• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

evblurbs/react-native-md-textinput: React Native TextInput styled with Material ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

evblurbs/react-native-md-textinput

开源软件地址(OpenSource Url):

https://github.com/evblurbs/react-native-md-textinput

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

React Native Material Design TextInput

React Native TextInput styled with Material Design.

demo

Installation

npm install react-native-md-textinput

Usage

I'm going to refer to the react-native-md-textinput Component as TextField. You can name it whatever you like when importing it.

The most basic usage is to import the TextField Component and render it with the props label and highlightColor. Note that this example uses the ScrollView Component. This allows the keyboard to be dismissed when users tap outside the input and keyboard area.

import TextField from 'react-native-md-textinput';

class App extends React.Component {
  render() {
    return (
      <ScrollView>
        <TextField label={'Name'} highlightColor={'#00BCD4'} />
      </ScrollView>
    );
  }
}

TextInput

To customize the TextInput that is rendered inside the TextField Component, simply pass props the TextInput accepts to the TextField Component. You can find the props the TextInput Component accepts here.

Here is an example of how to change the keyboard type to numeric.

import TextField from 'react-native-md-textinput';

class App extends React.Component {
  render() {
    return (
      <ScrollView>
        <TextField
          label={'Name'}
          highlightColor={'#00BCD4'}
          keyboardType={'numeric'}
        />
      </ScrollView>
    );
  }
}

Dense Styling

To use the "dense" styling that matches the Material Design Style Guide, you can set the prop dense to true. By default, this prop is set to false.

demo dense

Props

Below are the props you can pass to the React Component to customize the TextInput.

Prop Type Default description
label string This string appears as the label.
highlightColor string This string represents the hex code, rgb, or rgba color of the TextInput label and underline when it is active/focused on.
duration number 200 A number representing the duration of floating label and underline animations in milliseconds.
labelColor string #9E9E9E This string represents the hex code, rgb, or rgba color of the TextInput label when it is inactive.
textColor string #000 This string represents the hex code, rgb, or rgba color of the text entered in the TextInput. Note: If you set textFocusColor or textBlurColor, those colors will override this one during the corresponding state of the TextInput.
textFocusColor string This string represents the hex code, rgb, or rgba color of the text entered in the TextInput when it is active/focused on.
textBlurColor string This string represents the hex code, rgb, or rgba color of the text entered in the TextInput when it is inactive.
borderColor string #E0E0E0 This string represents the hex code, rgb, or rgba color of the TextInput underline when it is inactive.
dense bool false If true, it will render the "dense" input field which is smaller in height and has smaller font sizes. You can view more here.
multiline bool false If true, it will allow multiline text input
height number undefined A number representing the initial height of the textInput
autoGrow bool false If true enables autogrow of the textInput
underlineColorAndroid string rgba(0,0,0,0) This sets the default underline color on Android to transparent (Issue #1).

Style Overrides

The main purpose of this component is to easily add a TextInput that matches the Material Design Style Guide. With that said, there have been requests (i.e. PR #4) to style the component beyond the Material Design Style Guide. I've added the props below to allow you to do exactly that. DO THIS AT YOUR OWN RISK. Changing the layout requires an understanding of the main elements of this component (i.e. FloatingLabel, the Viewwrapper, and the TextInput), and may cause compatibility issues between Android and iOS (Issue #2). I'll try to support any issues with these props, but they will be treated as second class citizens.

Prop Type Default description
inputStyle Object Object to override the styles of the TextInput.1
wrapperStyle Object Object to override the styles of the View that wraps the TextInput.1
labelStyle Object Object to override the styles of the Label that animates on focus of the TextInput.1

1: Object to override styles needs to match the format of inline styles. You can find the supported properties here.

TODO

  • Support multi-line TextInput fields
  • Support character limit
  • Add option for dark theme



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap