React Native按钮在不同模拟器定位不一致，如何实现多端适配？

问题原因 #

你当前使用top: 23%进行定位，这个百分比是相对于父容器的可用高度计算的，不同机型的屏幕尺寸、宽高比、安全区（刘海、底部横条、状态栏）高度都存在差异，自然会出现定位偏移的问题。你的Button组件本身封装没有问题，问题出在调用页MenuContainer的定位规则上。

最优解决方案：使用Flex布局代替百分比定位 #

完全弃用top属性，通过Flex的弹性占位特性实现布局统一，同时适配各机型安全区，这是RN中跨机型布局一致性最高的方案。

修改后的Login页面代码如下：

import React from 'react';
import styled from 'styled-components/native';
import { useNavigation } from '@react-navigation/native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; // RN官方推荐的安全区适配库

import Button from './Button';

const Container = styled.View`
  flex: 1;
  align-items: center;
  overflow: hidden;
  background-color: white;
  justify-content: flex-start;
`;

// 新增头部内容容器，自动撑满按钮上方的所有空间
const HeaderContainer = styled.View`
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
`;

const TitleText = styled.Text`
  padding-top: 20px;
  padding-horizontal: 20px;
  text-align: center;
`;

const DescriptionText = styled.Text`
  text-align: center;
  padding: 20px;
`;

// 移除top属性，通过底部内边距控制按钮和底部的距离，自动适配安全区
const MenuContainer = styled.View<{ bottomInset: number }>`
  width: 100%;
  padding-horizontal: 20px;
  padding-bottom: ${({ bottomInset }) => bottomInset + 20}px;
`;

const Login = () => {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets(); // 动态获取当前机型的安全区高度

  return (
    <Container>
      <HeaderContainer>
        <TitleText>login</TitleText>
        <DescriptionText>Create an account</DescriptionText>
      </HeaderContainer>
      <MenuContainer bottomInset={insets.bottom}>
        <Button
          title="create a new acount"
          onPress={() => navigation.navigate('register')}
        />
      </MenuContainer>
    </Container>
  );
};

export default Login;

备选方案：固定比例定位适配 #

如果你确实需要保留按钮距离顶部23%的位置规则，不要使用CSS百分比，改为动态计算屏幕高度后赋值，同时扣除状态栏高度：

import { Dimensions, StatusBar } from 'react-native';
const screenHeight = Dimensions.get('window').height;
const statusBarHeight = StatusBar.currentHeight || 0;

const MenuContainer = styled.View`
  width: 100%;
  top: ${screenHeight * 0.23 - statusBarHeight}px;
`;

这个方案的适配性略低于Flex方案，但比直接用CSS百分比的偏移问题要好很多。

内容的提问来源于stack exchange，提问作者user12494839