hcmobile-sdk/components/textInput/TextInputDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import TextInput from './index';
// create a component
class TextInputDemo extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        默认样式：
                    </Text>
                    <TextInput
                        ref = {(ref) => this.input = ref}
                        style = {{flex: 1,}}
                        maxLength = {15}
                        onChangeText = {(text) => {
                        }}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        Underline：
                    </Text>
                    <TextInput
                        ref = {(ref) => this.input = ref}
                        style = {{flex: 1,}}
                        placeholder = '测试Input'
                        placeholderTextColor = 'blue'
                        maxLength = {25}
                        underlineColor = 'blue'
                        underlineWidth = {2}
                        onChangeText = {(text) => {
                        }}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        隐藏密码:
                    </Text>
                    <TextInput
                        ref = {(ref) => this.input = ref}
                        style = {{flex: 1,}}
                        value = '测试密码隐藏'
                        maxLength = {25}
                        secureTextEntry = {true}
                        onChangeText = {(text) => {
                        }}
                    />
                </View>
                <View style = {[styles.rowStyle,{height:100}]}>
                    <Text style = {styles.tagText}>
                        多行显示:
                    </Text>
                    <TextInput
                        ref = {(ref) => this.input = ref}
                        style = {{width:150,}}
                        value = '测试多行多行测试多行多行测试多行多行'
                        mulitline = {true}
                        maxLength = {25}
                        secureTextEntry = {false}
                        onChangeText = {(text) => {
                        }}
                    />
                </View>
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    rowStyle:{
        paddingTop:10,
        paddingLeft:20,
        paddingRight:20,
        flexDirection: 'row',
        alignItems: 'center',
        width:'100%',
    },
    tagText:{
        marginRight:20,
        width:100,
    }
});

//make this component available to the app
export default TextInputDemo;