React Native 适配iPhone X

最新推荐文章于 2025-04-15 14:21:02 发布

七月_代码君

最新推荐文章于 2025-04-15 14:21:02 发布

阅读量2k

点赞数

分类专栏： react-native 文章标签： react-native 适配iPhone-X 自定义Header

本文链接：https://blog.csdn.net/weixin_40166364/article/details/78709222

版权

react-native 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何在React项目中使用react-navigation实现跨平台一致的Header样式，并自定义Tab栏，包括配置不同屏幕尺寸下的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中，使用react-navigation和自定义Header，这样保证iOS和安卓显示的Header显示一样

navigation的头部高度为，sizeHeader=84，
头部内容为，sizeHeaderContent=44，
解决屏幕的高度问题，这时候直接在AppDelegate中实现
self.window = [[UIWindow alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-34)];

自定义Header

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Dimensions,
    Image,
    StatusBar,
    TouchableOpacity,
    Platform,
} from 'react-native';

import { Widget } from 'rn-yunxi';
const { width, height } = Dimensions.get('window');
const BackIcon = require('./back.png');
const Text = Widget.Text;
//模块声名并导出
export default class Header extends Component {
    //属性声名
    static propTypes = {
        navigation: React.PropTypes.any,
        showBackAction: React.PropTypes.bool,
        backAction: React.PropTypes.func,
        title: React.PropTypes.string,
        defaultStatusBar: React.PropTypes.bool,
        rightTitle: React.PropTypes.string,
        rightAction: React.PropTypes.func,
        rightIcon: React.PropTypes.element,
        containerStyles:React.PropTypes.any,
        headerViewStyles:React.PropTypes.any,
        backIconSrc:React.PropTypes.number,
        showDivider: React.PropTypes.bool

    };
    //默认属性
    static defaultProps = {
        title: '',
        defaultStatusBar: true,
        showBackAction: true,
        showDivider: true


    };
    //构造函数
    constructor(props) {
        super(props);
        this.state = { //状态机变量声明
        }
    }

    //渲染
    render() {
        return (
            <View style={[styles.container,this.props.containerStyles]}>
                <View style={[styles.headerView,this.props.headerViewStyles]}>
                    {Platform.OS === 'ios' ? <StatusBar barStyle={this.props.defaultStatusBar ? 'default' : 'light-content'} /> : null}
                    <View style={styles.header}>
                        <View style={styles.titleView}>
                            <Text style={styles.title}>{this.props.title}</Text>
                        </View>
                        {this.props.showBackAction ? <TouchableOpacity
                            onPress={() => {
                                if (this.props.backAction) {
                                    this.props.backAction();

                                } else {
                                    if (this.props.navigation) {
                                        console.log(this.props.navigation);
                                        this.props.navigation.goBack();
                                    }
                                }
                            }}>
                            <View style={styles.backView}>
                                <Image style={{width:22,height:22}} source={this.props.backIconSrc?this.props.backIconSrc:BackIcon} />
                            </View>
                        </TouchableOpacity> : <View />}


                        {this.props.rightTitle ? <TouchableOpacity onPress={() => {
                            if (this.props.rightAction) {
                                this.props.rightAction();
                            }
                        }}>
                            <View style={styles.rightView}>
                                <Text style={this.props.rightTextStyle}>{this.props.rightTitle}</Text>
                            </View>
                        </TouchableOpacity> : null}

                            {this.props.rightIcon}

                    </View>
                </View>

                {
                    this.props.showDivider == true ?   <View style={GlobalStyle.styleDividerDefault} /> : null
                }
                {
                    this.props.children
                }
            </View>
        );
    }
};

  const sizeHeader = (Platform.OS === 'ios'&&  ISIPHONEX)?84:Platform.OS === 'ios'?64: 50;
  const sizeHeaderMarginTop = Platform.OS === 'ios' ? ISIPHONEX ?35:20: 0
  const sizeHeaderContent = Platform.OS === 'ios' ? 44 : 50;
//iPhone X
  const ISIPHONEX = Dimensions.get('window').width==375 &&        Dimensions.get('window').height == 812

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F3F3F3',
        width: width,
        height: height,
    },

    headerView: {
        backgroundColor: '#FFFFFF',
        height: sizeHeader,
    },
    header: {
        justifyContent: 'space-between',
        width: width,
        marginTop:sizeHeaderMarginTop,
        flexDirection: 'row',
        height: sizeHeaderContent,
        alignItems:'center',
        paddingRight:15
    },
    titleView: {
        left: 0,
        top: 0,
        height: sizeHeaderContent,
        position: 'absolute',
        width: width,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        fontSize: 18,
    },
    backView: {
        justifyContent: 'center',
        paddingLeft: 10,
        width: 50,
        flex: 1,
    },
    rightView: {
        flex: 1,
        justifyContent: 'center',
        paddingRight: 10,
        alignItems: 'flex-end',
        minWidth: 50
    }
});

AppDelegate.m

@property (nonatomic, strong) UIWindow *window;
@property (nonatomic,strong) UIViewController * rootViewController;

#define is_iPhoneX [UIScreen mainScreen].bounds.size.width == 375.0f && [UIScreen mainScreen].bounds.size.height == 812.0f   //判断是否iPhoneX

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{ 

   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   _rootViewController = [UIViewController new];
   _rootViewController.view = rootView;
   self.window.rootViewController = _rootViewController;
   [self.window makeKeyAndVisible];
}

react-navigation的配置：


const renderTabImage = (image) => {
    return (
        <Image style={[{ width: Constant.scale(21), height: Constant.scale(21) }]} resizeMode="contain" source={image} />
    )

};

const TabStack = TabNavigator(
    {
        Tab1: {
            title: '首页',
            login: true,
            screen: HomePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '首页',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_HOME : IMG_HOME_SELECTED)
                ),

            }
        },

        Tab2: {
            title: '产品目录',
            login: true,
            screen: ProductSummary,
            navigationOptions: {
                header: null,
                tabBarLabel: '产品目录',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_PM : IMG_PM_SELECTED)
                ),

            }
        },
        Tab3: {
            title: '加入如新',
            login: true,
            screen: MyIdentity,
            navigationOptions: {
                header: null,
                tabBarLabel: '加入如新',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_ADDNUSKIN : IMG_ADDNUSKIN_SELECTED)
                ),

            }
        },

        Tab4: {
            title: '个人中心',
            login: true,
            screen: MinePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '个人中心',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_MINE : IMG_MINE_SELECTED)
                ),

            }
        },

    },
    {
        tabBarVisible: false,
        tabBarPosition: 'bottom',
        backBehavior: 'none',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions: {
            showIcon: true,
            scrollEnabled: false,
            activeTintColor: Constant.colorPrimary,
            inactiveTintColor: Constant.colorTxtDefault,
            style: {
                margin: 0,
                backgroundColor: 'white',
                paddingTop: 0,
                height:  ISIPHONEX ?  Constant.scale(74) : Constant.scale(50),
                // paddingTop
            },
            tabStyle: {
                borderTopWidth: Constant.sizeDividerNormal,
                borderTopColor: Constant.colorDivider,
                margin: 0,
                padding: 0,
            },
            indicatorStyle: {
                height: 0
            },
            labelStyle: {
                padding: 0,
                margin: 0,
                marginTop: 0,
                fontSize: 12,
                marginBottom: ISIPHONEX ? 30 : 6,
            },

        }
    }
);

const TabRuXin = TabNavigator(
    {
        Tab1: {
            title: '首页',
            login: true,
            screen: HomePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '首页',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_HOME : IMG_HOME_SELECTED)
                ),

            }
        },

        Tab2: {
            title: '产品目录',
            login: true,
            screen: ProductSummary,
            navigationOptions: {
                header: null,
                tabBarLabel: '产品目录',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_PM : IMG_PM_SELECTED)
                ),

            }
        },
        Tab3: {
            title: '我的事业',
            login: true,
            screen: MyCareer,
            navigationOptions: {
                header: null,
                tabBarLabel: '我的事业',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_ADDNUSKIN : IMG_ADDNUSKIN_SELECTED)
                ),

            }
        },

        Tab4: {
            title: '个人中心',
            login: true,
            screen: MinePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '个人中心',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_MINE : IMG_MINE_SELECTED)
                ),

            }
        },

    },
    {
        tabBarVisible: false,
        tabBarPosition: 'bottom',
        backBehavior: 'none',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions: {
            showIcon: true,
            scrollEnabled: false,
            activeTintColor: Constant.colorPrimary,
            inactiveTintColor: Constant.colorTxtDefault,
            style: {
                margin: 0,
                backgroundColor: 'white',
                paddingTop: 0,
                height: Constant.scale(50),
            },
            tabStyle: {
                borderTopWidth: Constant.sizeDividerNormal,
                borderTopColor: Constant.colorDivider,
                margin: 0,
                padding: 0,
            },
            indicatorStyle: {
                height: 0
            },
            labelStyle: {
                padding: 0,
                margin: 0,
                marginTop: 1,
                fontSize: Constant.scale(11),
            },

        }
    }
);

Header的使用

  render() {
        return (
                <Header title={'库存查询'} navigation={this.props.navigation}>
                </Header>
        );
    }

这里写图片描述