TextMultiEditView.js
4.86 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 titleViewHeight = (24);
// 默认横向外边距
const HPading = (15);
// 默认纵向内边距
const VPading = (6);
/*
多行输入框组件(type:'LONG_TEXT')
*/
export default class TextMultiEditView 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:控件类型(LONG_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: 'white',
// 上内边距
paddingTop: VPading,
// 左内边距
paddingLeft: 10,
// 右内边距
paddingRight: HPading
}}>
{/*标题显示区域*/}
<View style={{
flexDirection: 'row',
height: titleViewHeight,
justifyContent: 'flex-start',
alignItems: 'center'
}}>
{/*是否必须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',
// 宽度
width: "100%",
// 高度
height: 80,
// 左外边距
marginLeft: 14,
// 输入框背景色
backgroundColor: 'white',
// 输入框字体对齐样式
textAlign: 'left',
// 纵向内边距
paddingVertical: 5,
// 横向内边距
paddingHorizontal: 0,
// 文字纵向对齐样式
textAlignVertical: 'top'
}}
//最小输入字数
minLength={minLength}
//最大输入字数
maxLength={maxLength || 120}
//是否多行
multiline={true}
//键盘样式
keyboardType={this.inputType}
//默认值
defaultValue={this.state.inputValue}
//输入框内容发生变化的触发回调
onChangeText={text => {
if (this.onChangeText) {
this.onChangeText(text)
}
this.attrData.value = text;
}}
//提示文字颜色
placeholderTextColor={'#999'}
//提示文字
placeholder={placeholder || '请输入'}
//是否输入框失去焦点时自动触发提交
blurOnSubmit={false}
//去除android输入框下面的横线，和ios保持一致
underlineColorAndroid="transparent"
/>
</View>
);
}
}