Troila Mobile Ui

Troila Mobile Ui

  • Docs
  • API
  • Help
  • Blog

›Components

Troila Mobile Ui

  • Getting Started

Components

  • Text
  • ListView
  • List
  • TextInput
  • InputItem
  • Step
  • SpringAnimatedView

卓朗云桌面-内部组件

  • request (请求类)
  • BackgroundButton
  • ExtendsBackButton
  • HeaderTitleButton
  • HeaderImageButton
  • 注意事项
  • 不同平台和设备的入口

TextInput

基于react-native的TextInput的封装

规则

  • 修复了ios clear的异常
  • 统一处理了取消内容的按钮

Example

iOS Android

Code

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Image,
    Button,
} from 'react-native';
import { TextInput } from 'troila-mobile-ui';


export default class Example extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={{backgroundColor:'#fff',marginTop: 15,padding:15}}>
                    <TextInput
                        inputStyle={{
                            fontSize: 16,
                            color: '#333',
                            height:20,
                            flex:1,
                        }}
                        placeholder={'请输入内容'}
                    />
                </View>
                <TextInput
                    style={{
                        marginTop: 30,
                        height: 30,
                        backgroundColor: '#fff',
                        marginLeft: 15,
                    }}
                    inputStyle={{
                        fontSize: 16,
                        color: '#333',
                        flex: 1,
                    }}
                    placeholder={'请输入内容'}
                    showClearButton={true}
                    onChangeText={(e)=>{
                        console.log(e)
                    }}
                />
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f9',
    }
})

Props

属性说明类型默认值
showClearButton是否显示取消内容按钮Booleanfalse
style外部容器样式Stylenull
inputStyletextInput样式Stylenull
onChangeText键盘输入内容时的时间Function()=>{}

Methods

clear()

clear();

清除文本内容


isFocused()

isFocused():

是否获得焦点

更多 react-native TextInput 属性请参考 react-native TextInput (http://facebook.github.io/react-native/docs/textinput.html)

← ListInputItem →
  • 规则
  • Example
  • Code
  • Props
  • Methods
    • clear()
    • isFocused()
Troila Mobile Ui
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2018 Your Name or Your Company Name