react native实现自定义导航栏

左手的ㄟ右手 2022-12-27 07:13 277阅读 0赞

const ImageHeader = props => (
        <View style={
       {position: "relative", height: 80}}>
            {/* <Image
                style={
       {position: "absolute", zIndex: -1, width: "100%", height: 80, resizeMode: "cover"}}
                source={require('../../image/bac_nav_top.png')}
            /> */}
            <View {...props} style={
       { flexDirection: 'row',position:"absolute",top:"50%",marginTop:-20,}}>
                {/* <Image style={
       { width: 24, height: 26 }} source={require('../image/kefu_top.png')} /> */}
                <Image style={
       { width: 35, height: 35, marginLeft: 25 }} source={require('../../image/kefu.png')} />
                <Text style={
       { fontSize: 20, fontWeight: '900', color: '#ebd598', marginLeft: 15 , marginTop: 5}}>文本</Text>
                <TouchableWithoutFeedback {...props} onPress={() => navigation.navigate("Me")}>
                    <Icon style={
       { padding: 5, marginRight: 5, marginLeft: 38 }} name="user-circle" size={35} />
                </TouchableWithoutFeedback>
            </View>
        </View>
    );

navigation.setOptions({
                title: '顶部导航栏',
                headerStyle: {
                    height:80,
                    borderBottomWidth: 0,
                    //背景颜色必须为透明，不然无法透出底部图片
                    backgroundColor: "transparent",
                    //安卓中不添加此属性会导致背景图无法铺满
                    elevation: 0,
                    //标题居中
                    alignSelf: "center",
                    headerTransparent:true,
                },
                header:props=>{
                    return <ImageHeader />;
                }
            });