便于使用的RN搜索头组件 – react-native-search-header

[weixin_38078058]

react-native-seach-header 基于MD模式的便于使用的React Native搜索头组件。 安装 $ npm install react-native-search-header –save 使用方法 To use search header you simply import the component factory function to create a renderable component: import SearchHeaderComponent from 'react-native-search-header'; const SearchHeaderView = SearchHeaderComponent(); 示例 你可以直接导入组件工厂函数来创建一个可渲染组件： import React, { Component } from 'react'; import { Dimensions, AppRegistry, StyleSheet, View, Text, Button, StatusBar } from 'react-native'; import SearchHeaderComponent from 'react-native-search-header'; const DEVICE_WIDTH = Dimensions.get(`window`).width; const SearchHeader = SearchHeaderComponent(); const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#f5fcff' }, status: { zIndex: 10, elevation: 2, width: DEVICE_WIDTH, height: 21, backgroundColor: '#0097a7' }, header: { justifyContent: 'center', alignItems: 'center', width: DEVICE_WIDTH, height: 56, marginBottom: 6, backgroundColor: '#00bcd4' }, label: { flexGrow: 1, fontSize: 20, fontWeight: `600`, textAlign: `left`, marginVertical: 8, paddingVertical: 3, color: `#f5fcff`, backgroundColor: `transparent` }, button: { justifyContent: 'center', alignItems: 'center', width: 130, height: 40, marginTop: 40, borderRadius: 2, backgroundColor: `#ff5722` } }); export default class Demo extends Component { constructor ( props : Object, context : Object ) { super(props, context); } render () { return ( <View style = { styles.container }> <StatusBar barStyle = 'light-content' /> <View style = { styles.status }/> <View style = { styles.header }> <Text style = { styles.label }>Demo</Text> </View> <SearchHeader ref = {(searchHeader) => { this.searchHeader = searchHeader; }} statusHeightOffet = { 21 } /> <View style = { styles.button }> <Button title = 'Open Search' color = '#f5fcff' onPress = {() => this.searchHeader.show()} /> </View> </View> ); } } AppRegistry.registerComponent('Demo', () => Demo);