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

【问题标题】：React-native: Positioning element based on different simulatorReact-native：基于不同模拟器的定位元素
【发布时间】：2021-08-05 06:34:50
【问题描述】：

我使用样式化组件和打字稿创建了一个 Button 组件。我在不同的地方使用过我的按钮。我目前正在将我的应用程序测试到不同的模拟器中。我在定位按钮时遇到问题。在 iPhone-8 中，它看起来与预期一样，但在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;

【问题讨论】：

发布您所面临问题的屏幕截图
我更新了我的问题，现在你可以看到截图了
使用top: 23%; 定位元素是一种不好的做法。 % 取决于屏幕大小，因此可能会产生这样的问题。
你建议我做什么？
所有我想要的按钮组件在每个模拟器中看起来都一样。

标签： ios react-native android-studio ios-simulator styled-components

【解决方案1】：

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

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

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

像这样

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

把你的标题和描述放在里面。现在，因为我给了它flex: 1，它会尝试尽可能多地占用垂直空间。

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

查看snack 获取完整代码。

【讨论】：