封装完成搜索组件

units/components/common/YRSearchBar.js

@@ -1,21 +1,84 @@
 import React from 'react';
-import {View} from "react-native"
+import {
+    Keyboard,
+    Image,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+    StyleSheet,
+    ScrollView,
+    RefreshControl
+} from "react-native"
+let Dimensions = require('Dimensions');
+let screenWidth = Dimensions.get('window').width;
 
-class YRSearchBar extends React.Component{
-    constructor(props){
+/*自定义搜索框组件*/
+class YRSearchBar extends React.Component {
+    constructor(props) {
         super(props);
-        this.state={
-            name:'YRSearchBar'
+        this.state = {
+            inputValue: ""
         };
     }
 
+    onStartSearch = (onSearch) => {
+        Keyboard.dismiss();
+        onSearch(this.refs.keyWordInput.props.value);
+    }
 
-    render(){
-        return <View>
-
-
+    render() {
+        let {placeholder, onSearchChangeText, value, onSearch} = this.props;
+        return <View style={styles.searchContainer}>
+            <View style={styles.search}>
+                <Image source={require('../../assets/images/icon_find.png')}
+                       style={{width: 18 ,height: 18}}></Image>
+                <TextInput underlineColorAndroid="transparent"
+                           placeholder={placeholder}
+                           style={styles.searchInput}
+                           onChangeText={onSearchChangeText}
+                           value={value}
+                           ref="keyWordInput"
+                           onSubmitEditing={this.onStartSearch.bind(this, onSearch)}>
+                </TextInput>
+                <TouchableOpacity
+                    onPress={this.onStartSearch.bind(this, onSearch)}
+                    style={styles.searchView}>
+                    <Text style={{color: '#0391ff', fontSize: 14}}>搜索</Text>
+                </TouchableOpacity>
+            </View>
         </View>
     }
 }
 
+const styles = StyleSheet.create({
+    searchContainer: {
+        paddingRight: 15,
+        paddingLeft: 15,
+        paddingTop: 10,
+        paddingBottom: 10,
+        backgroundColor: "#F8F8F8"
+    },
+    search: {
+        height: 32,
+        backgroundColor: "#ffffff",
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: "#E0E0E0",
+        paddingLeft: 10,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    searchInput: {
+        marginLeft: 10,
+        width: screenWidth * 7 / 10,
+        height: 30,
+        padding: 0,
+        fontSize: 14,
+    },
+    searchView: {
+        justifyContent: "flex-end",
+    }
+});
+
 export  default YRSearchBar;

units/components/pages/HomeScreen.js

@@ -4,6 +4,8 @@ import {Platform,StatusBar,View, Text, Button,TouchableHighlight,StyleSheet} fro
 import {changeBtnText} from "../../actions/bi/index";
 import YRHttpRequest from  "../../utils/network/fetch"
 import {API} from "../../utils/network/axios/api.config";
+import YRSearchBar from "../common/YRSearchBar";
+
 
 class HomeScreen extends React.Component {
     static navigationOptions = {
@@ -13,6 +15,14 @@ class HomeScreen extends React.Component {
             height: StatusBar.currentHeight + 56,
         } : {}
     }
+    constructor(props){
+        super(props);
+        this.state={
+            name:'YRSearchBar',
+            inputValue:""
+        };
+    }
+
 
     loadData=()=>{
         //fetch请求
@@ -33,51 +43,76 @@ class HomeScreen extends React.Component {
         // })
     }
 
+    onSearchChangeText=(text)=>{
+       console.log("onSearchChangeText() text:",text);
+        if (text) {
+            this.setState({ inputValue: text })
+            clearTimeout(this.settimeId);
+            this.settimeId = setTimeout(() => {
+
+            }, 1000);
+        } else {
+            this.setState({inputValue: ''})
+        }
+    }
+
+    onSearch=(inputValue)=>{
+        console.log("onSearch()",inputValue);
+    }
+
     render() {
         const {navigation} = this.props;
-        return (
-            <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
-                <Text style={{marginBottom: 10}}>Home Screen</Text>
-                <Button
-                    title="详情页"
-                    onPress={() => {
-                        navigation.navigate('Details', {name: '动态的'});
-                    }}
-                />
-                <Button
-                    title="异步进度条"
-                    onPress={() => {
-                        navigation.navigate('YRDatePicker', {name: '进度条'});
-                    }}
-                />
-
-                <Button
-                    title="自定义对话框"
-                    onPress={() => {
-                        navigation.navigate('YRModel', {name: '进度条'});
-                    }}
-                />
-                <Text style={{marginBottom: 10}}>{this.props.btnText}</Text>
-                <Button title="更新文字"
+        return (<View>
+                <YRSearchBar
+                    value={this.state.inputValue}
+                    placeholder="搜索"
+                    onSearch={this.onSearch}
+                    onSearchChangeText={this.onSearchChangeText}/>
+                <View style={{ alignItems: "center", justifyContent: "center"}}>
+
+                    <Text style={{marginBottom: 10}}>Home Screen</Text>
+                    <Button
+                        title="详情页"
+                        onPress={() => {
+                            navigation.navigate('Details', {name: '动态的'});
+                        }}
+                    />
+                    <Button
+                        title="异步进度条"
                         onPress={() => {
-                             this.props.changeText("我的第一个ReactNative项目!");
-                        }}/>
+                            navigation.navigate('YRSearchBar', {name: '进度条'});
+                        }}
+                    />
 
-                <Button style={{marginBottom: 10}}
-                        title="断点调式" onPress={()=>{
-                    for (let i = 0; i < 10; i++) {
+                    <Button
+                        title="自定义对话框"
+                        onPress={() => {
+                            navigation.navigate('YRModel', {name: '进度条'});
+                        }}
+                    />
+                    <Text style={{marginBottom: 10}}>{this.props.btnText}</Text>
+                    <Button title="更新文字"
+                            onPress={() => {
+                                this.props.changeText("我的第一个ReactNative项目!");
+                            }}/>
+
+                    <Button style={{marginBottom: 10}}
+                            title="断点调式" onPress={()=>{
+                        for (let i = 0; i < 10; i++) {
                             console.log("i*i=",i*i);
-                    }
-                }}/>
+                        }
+                    }}/>
+
+                    <TouchableHighlight
+                        underlayColor="#FF00FF"
+                        activeOpacity={1}
+                        style={styles.button} onPress={this.loadData.bind(this)}>
+                        <Text style={styles.text} > Touch Here </Text>
+                    </TouchableHighlight>
 
-                <TouchableHighlight
-                    underlayColor="#FF00FF"
-                    activeOpacity={1}
-                    style={styles.button} onPress={this.loadData.bind(this)}>
-                    <Text style={styles.text} > Touch Here </Text>
-                </TouchableHighlight>
+                </View>
+        </View>
 
-            </View>
         );
     }
 }