React-native：基于不同模拟器定位元素

Question

我使用样式化组件和打字稿创建了一个 Button 组件。我在不同的地方使用了我的按钮。我目前正在将我的应用程序测试到不同的模拟器中。我在定位按钮时遇到问题。在 iPhone-8 it looks as expected but in iPhone-11 中，按钮的位置不同。我还没有在 android 中测试我的应用程序，但我很确定它在 Android 模拟器中看起来会有所不同。我使用 css 属性 top 进行定位。我不知道有没有更好的方法可以将按钮组件放置在每个模拟器中看起来相同的位置。

这是我的按钮组件

import React from 'react';
import styled from 'styled-components/native';

import { ButtonText } from '../texts';
import { TouchableOpacityProps } from 'react-native';

type Props = TouchableOpacityProps & {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  endTitle?: string;
  color?: string;
};

const Container = styled.TouchableOpacity<Props>`
  background-color: ${({ theme, disabled, color }) =>
    disabled
      ? theme.colors.greyGradient[500]
      : color ?? theme.colors.primaryGradient[900]};
  padding: 20px;
  align-items: center;
  justify-content: ${({ endTitle }) =>
    endTitle ? 'space-between': 'center'};
  flex-direction: row;
`;

const TitleText = styled(ButtonText)`
  color: ${({ theme }) => theme.colors.white};
`;

const Button = ({
  title,
  onPress,
  disabled = false,
  endTitle,
  color
}: Props) => {
  return (
    <Container
      {...{ title, onPress, disabled, color }}
    >
      <TitleText>{title}</TitleText>
      {endTitle && <TitleText>{endTitle}</TitleText>}
    </Container>
  );
};

export default Button;

这是我使用按钮组件的屏幕

import React from 'react';
import styled from 'styled-components/native';
import { useNavigation } from '@react-navigation/native';


import Button from './Button';

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

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

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

const MenuContainer = styled.View`
  width: 100%;
  top: 23%; // this is the position which is shows me different position in different simulator
`;

const Login = () => {
  const navigation = useNavigation();

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

export default Login;

Answer 1

应避免使用基于 % 的定位值，因为它可能会在具有不同尺寸的设备上导致无法预料的问题。

相反，您应该使用 flex: 1 让一个元素占据整个剩余 space，这样除此元素之外的元素将被推到边缘。

所以您可以做的是创建一个新视图，其中包含可扩展元素的代码。

像这样

const Center = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

并把你的标题和描述放在里面。现在因为我给它一个 flex: 1，它会尝试尽可能多地垂直 space。

现在，由于您的按钮位于此 Center 元素下方，它会自动尽可能多地被推到底部。

查看此 snack 以获得完整代码。

React-native：基于不同模拟器定位元素

React-native: Positioning element based on different simulator

ios

ios-simulator

android-studio

react-native

styled-components