SearchBox.js
1.48 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
/**
* Created by yzdd on 2018/3/11.
*/
import React, {Component} from 'react';
import {
View,
TextInput,
StyleSheet,
Image
} from 'react-native';
import {width} from '../utils/publiscStyle';
const searchIcon = require("../assets/searchIcon.png");
export default class SearchBox extends Component {
render() {
const {searchConStyle, searchTextInputStyle, icon, ...other} = this.props;
return (
<View style={[styles.searchBoxContainer, searchConStyle]}>
<View style={styles.inputView}>
{
icon ?
<Image
source={searchIcon}
resizeMode={"contain"}
style={styles.icon1}
/> : null
}
<TextInput
style={[styles.searchBoxTextInput, searchTextInputStyle]}
placeholder={"搜索"}
underlineColorAndroid={'transparent'}
{...other}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
searchBoxContainer: {
width,
height: 46,
alignItems: "center",
justifyContent: "center",
flexDirection: "row"
},
searchBoxTextInput: {
textAlign: "left",
fontSize: 14,
color: "#999999",
marginLeft: 8,
flex: 1,
padding: 0
},
icon1: {
width: 12,
height: 13,
marginLeft: 10,
},
inputView: {
backgroundColor: "#eeeff3",
flexDirection: "row",
alignItems: "center",
width: width - 16,
height: 28,
borderRadius: 3,
}
});