react-native开发实例之仿美团头部导航

今天我要对美团的头部导航进行山寨

美团页面具体的效果图如下：

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',
            '点击了城市',
        );

    }

    _onPressSearch(e) {
        Alert.alert(
            'alert',
            '点击了搜索',
        );
    }

    _onPressIcon(e) {
        Alert.alert(
            'alert',
            '点击了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状态栏
        height: Platform.OS === 'ios' ? 60 : 40,   // 处理iOS状态栏
        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,
    }

});

问题几点

• ios的头部和android的头部高度、paddingTop的设置是不一样的，通过Platform.OS来判断后进行设置；
• 文本输入框在android下面有一个下划线，没法去掉，只能在android下使用Text
• android下text框支持borderRadius，而ios的text不支持borderRadius，故在ios下使用textinput
• 这里在小米4s上测试效果可行，但是android估计适配还得调整，searchbar区域最好使用图片+text+图片的方式保证兼容性更好

使用到的开源项目

• https://github.com/oblador/react-native-vector-icons
  具体的使用参考下github的文档即可，和web上使用一样的方便