uatcomponent/src/container/searchBar/searchBar.js

公司内部使用自定义简单组件

//@flow
/**
 * 页面:搜索框 created by Mark
*/

import React, { Component } from 'react';
import { View,
         Text,
         TouchableOpacity,
         Image,
         ViewStyle,
         StyleSheet,
         TextInput,
} from 'react-native';
import { ComponentProps,ScrollDataType,SearchModel } from "../../model";

type Props = {
    style:ViewStyle
}& ComponentProps<SearchModel,String>;
type State = {

};

export class SearchBar extends Component <Props,State>{

    /**初始化state*/
    state:State = {
    }

		onClick = ()=>{
			this.props.onClick && this.props.onClick(this.props.data,'');
		}
    /**渲染函数*/
    render(){
        return (
						 <TouchableOpacity 
						 			onPress={this.onClick}
						 			style={styles.container}>
                 <View style={styles.radiusContainer}>
                     <Image style={styles.img} source={require('uatcomponent/src/resource/search.png')}/>
                     <Text style={styles.placeholder}>请输入款号/商品名称</Text>
                 </View>
             </TouchableOpacity>
         )
    }
}

//样式
const styles = StyleSheet.create({
    container:{paddingVertical:5},
    radiusContainer:{height:40,borderRadius: 20,paddingVertical: 5,paddingHorizontal: 10,flexDirection: 'row',backgroundColor: 'white',alignItems: 'center'},
		img:{width:20,height:20,tintColor:'gray'},
		placeholder:{color:'gray'},
})