TextSingleEditView.js
4.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import React, {Component} from 'react';
import {Text, TextInput, View,} from 'react-native';
// 默认高度
const defaultHeight = (70);
// 默认标题高度
const titleViewHeight = (24);
// 默认纵向内边距
const VPading = (6);
/*
单行输入框组件(type:'TEXT')
*/
export default class TextSingleEditView extends Component {
// 构造方法
constructor(props) {
super(props);
this.state = {
inputValue: ''//输入内容
}
// 传入参数
this.attrData = this.props.attrData;
// json解析后的传入参数
this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};
// 用于带出输入内容的callback回调
this.onChangeText = this.props.onChangeText;
// 键盘格式
this.inputType = this.props.inputType || 'default';
}
// 生命周期-组件将要展示
componentWillMount() {
// 设置默认值
if (this.attrData.value && this.attrData.value.length > 0) {
this.setState({
inputValue: this.attrData.value
})
}
}
// 绘制UI
render() {
/*
name:标题
code:代码编号
type:控件类型(TEXT)
description:描述
isRequired:是否必须
isPreview:是否预览
*/
let {name, code, type, description, isRequired, isPreview} = this.attrData;
/*
placeholder:输入提示文字
defaultValue:默认值
maxLength:最大输入字数
minLength:最小输入字数
*/
let {placeholder, defaultValue, maxLength, minLength} = this.extendData;
return (
<View style={{
// 宽度
width: '100%',
// 背景色
backgroundColor: '#fff',
// 上内边距
paddingTop: VPading,
// 左内边距
paddingLeft: 10,
// 右内边距
paddingRight: 15,
// 高度
height: defaultHeight
}}>
{/*标题显示区域*/}
<View style={{
flexDirection: 'row',
height: titleViewHeight,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: 'white'
}}>
{/*是否必须UI设定*/}
{isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
{!isRequired && <Text style={{color: "#fff"}}>* </Text>}
{/*标题设定*/}
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name || ""}</Text>
</View>
{/*输入框*/}
<TextInput
style={{
// 字号
fontSize: 14,
// 字体颜色
color: 'black',
// 输入框高度
height: 30,
// 输入框左外边距
marginLeft: 10,
// 输入框背景色
backgroundColor: 'white',
// 输入框字体对齐样式
textAlign: 'left',
// 输入框上外边距
marginTop: 4,
// 输入框下外边距
marginBottom: 4,
// 输入框内边距（ios有默认padding，去除和android保持一致）
padding: 0
}}
//最小输入字数
minLength={minLength}
//最大输入字数
maxLength={maxLength || 50}
//是否多行
multiline={false}
//键盘样式
keyboardType={this.inputType}
//默认值
defaultValue={this.state.inputValue}
//输入框内容发生变化的触发回调
onChangeText={text => {
if (this.onChangeText) {
this.onChangeText(text)
}
this.attrData.value = text;
}}
//提示文字颜色
placeholderTextColor={'#999'}
//提示文字
placeholder={placeholder || '请输入'}
//显示内容
value={defaultValue}
//去除android输入框下面的横线，和ios保持一致
underlineColorAndroid="transparent"
/>
</View>
);
}
}