今天我要對美團(tuán)的頭部導(dǎo)航進(jìn)行山寨

美團(tuán)頁面具體的效果圖如下：

Paste_Image.png

山寨效果圖

ios.gif

android.gif

具體的代碼如下：

'use strict';


import React, {Component} from 'react';
import {
    Alert,
    View,
    Text,
    TextInput,
    StyleSheet,
    Platform,
    NavigatorIOS,
    TouchableOpacity,
}from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

export default  class Header extends Component {

    _onPressCity(e) {

        Alert.alert(
            'alert',
            '點(diǎn)擊了城市',
        );

    }

    _onPressSearch(e) {
        Alert.alert(
            'alert',
            '點(diǎn)擊了搜索',
        );
    }

    _onPressIcon(e) {
        Alert.alert(
            'alert',
            '點(diǎn)擊了icon',
        );
    }

    render() {
        return (
            <View style={styles.container}>
                
                <TouchableOpacity onPress={e=>this._onPressCity(e)}>
                    <View style={styles.cityDropdown}>
                        <Text style={styles.cityTitle}>三亞</Text>
                        <FontAwesomeIcon name="angle-double-down" color="#ffffff" size={20}/>
                    </View>
                </TouchableOpacity>


                <View style={styles.searchBar}>
                    <TouchableOpacity onPress={e=>this._onPressSearch(e)}>
                        {
                            Platform.OS === 'ios' ? (
                                <TextInput editable={false} style={styles.searchTextInput}
                                           placeholder={'請輸入公寓名稱搜索...'}></TextInput>) : (
                                <Text style={styles.searchTextInput}>請輸入公寓名稱搜索...</Text>)
                        }
                    </TouchableOpacity>
                </View>


                <View style={styles.rightIcons}>
                    <TouchableOpacity onPress={e=>this._onPressIcon(e)}>
                        <FontAwesomeIcon name="qrcode" color="#ffffff" size={20}/>
                    </TouchableOpacity>
                </View>


                <View style={styles.rightIcons}>
                    <TouchableOpacity onPress={e=>this._onPressIcon(e)}>
                        <FontAwesomeIcon name="bell" color="#ffffff" size={20}/>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: '#e75404',
        paddingTop: Platform.OS === 'ios' ? 20 : 0,  // 處理iOS狀態(tài)欄
        height: Platform.OS === 'ios' ? 60 : 40,   // 處理iOS狀態(tài)欄
        paddingLeft: 5,
        paddingRight: 5,
        paddingBottom: 10,
    },
    cityDropdown: {
        marginTop: 5,
        flexDirection: 'row',
        paddingTop: 5,
        marginLeft: 10,
        marginRight: 5,
        backgroundColor: '#e75404',
    },
    cityTitle: {
        color: '#ffffff',
        paddingTop: Platform.OS === 'ios' ? 2 : 0,
        marginRight: 2,
    },
    searchBar: {
        height: 50,
        flex: 1,
    },
    searchTextInput: {
        borderRadius: 10,
        textAlignVertical: 'top',
        color: '#ccc',
        backgroundColor: 'white',
        height: 25,
        paddingLeft: 8,
        paddingTop: 5,
        marginRight: 5,
        marginTop: 6,
        fontSize: 12,
        textDecorationLine: 'none',
    },
    rightIcons: {
        marginTop: 5,
        paddingTop: 5,
        marginLeft: 2,
        marginRight: 5,
    }

});

問題幾點(diǎn)

• ios的頭部和android的頭部高度、paddingTop的設(shè)置是不一樣的，通過Platform.OS來判斷后進(jìn)行設(shè)置；
• 文本輸入框在android下面有一個(gè)下劃線，沒法去掉，只能在android下使用Text
• android下text框支持borderRadius，而ios的text不支持borderRadius，故在ios下使用textinput
• 這里在小米4s上測試效果可行，但是android估計(jì)適配還得調(diào)整，searchbar區(qū)域最好使用圖片+text+圖片的方式保證兼容性更好

使用到的開源項(xiàng)目

• https://github.com/oblador/react-native-vector-icons
  具體的使用參考下github的文檔即可，和web上使用一樣的方便