在 iOS 和 Android 中使用相同的代码但垂直边距的结果不同的 React Native 应用程序

Posted 2023-04-18

【中文标题】在 iOS 和 Android 中使用相同的代码但垂直边距的结果不同的 React Native 应用程序

【英文标题】：React Native app with same code but different result for vertical margins in iOS and Android

【发布时间】：2020-09-04 13:49:37

【问题描述】：

我在 android (Galaxy S7) 和 ios (iPhone S8+) 上测试了一个简单的 render()，得到了我不明白的结果。

S7 的 dp 高度（与密度无关的像素）是 640，而 iPhone 8 Plus 的高度是 736 dp，所以我预计 iPhone 8+ 上的“电子邮件”和“密码”之间的距离会稍微小一些，但不是那么小…… 第二个问题是负边距，这似乎在两个平台上表现不同。这是人们应该期待的吗？

（而且，是的，我知道我可以在两个平台上设置不同的边距，但我想了解为什么结果与我的预期如此不同......）

这是我的代码：

import React,  Component  from 'react';
import  View, TextInput  from 'react-native';

export class Login extends Component 

    render() 
      return (
          <View style= marginLeft: 100 >
                <View style= marginTop: 25 >
                    <TextInput
                        style= color: 'black', width: 260 
                        value='email'
                    />
                    <View style= marginTop: -10,
                        borderBottomWidth: 1,
                        width: 200,
                        borderBottomColor: 'black'  />
                </View>

                <View style= marginTop: 5 >
                    <TextInput
                        style= color: 'black', width: 260 
                        value='password'
                    />
                    <View style= marginTop: -10,
                        borderBottomWidth: 1,
                        width: 200,
                        borderBottomColor: 'black'  />
                </View>
          </View>
      );
    

这就是这段代码在安卓 Galaxy S7 模拟器（左）和 iPhone 8+ 模拟器上的显示方式。

【问题讨论】：

你应该使用Platform.OS或Platform.Android来分隔它

谢谢。我知道。但我认为（1）两个平台上字段（电子邮件和密码）之间的距离应该相似，（2）下划线将在两个平台上正确显示，但它们不在 iOS 上。总而言之 - 我会理解字段上方不同的上边距，但我的问题是：为什么两个平台上的字段和下划线没有以类似的方式显示？

@Yossi 我认为这只是 Apple 的垃圾“思维不同”，所以他们拒绝使用正确的 Box 模型，而是自己编造了对 Margins 的处理方式与世界其他地方不同的模型。

【参考方案1】：

我知道这不是你的问题，我看到了你的个人资料，你自己就是反应神，我非常尊重这一点哈哈

但我的问题是，为什么代码是这样的，而不是像这样的：

import React,  Component  from 'react';
import  View, TextInput  from 'react-native';

export class Login extends Component 

    render() 
      return (
          <View style= alignItems: 'center' >
                <TextInput
                    style=color: 'black', width: 260, borderBottomWidth : 4,  marginTop: 25
                    value='email'
                />
                <TextInput
                    style=color: 'black', width: 260, borderBottomWidth : 4, marginTop: 5
                    value='password'
                />
          </View>
      );
    

这段代码的工作方式是否相同？

[编辑]

另外，可能是因为 IOS 顶部和底部栏的一些问题（在较新的 iphone 上，情况并非如此）。因此，Android 的“顶部”可能与 IOS 的“顶部”不同，因为 Android 应用程序不会像 IOS 那样与顶部栏重叠。 因此，您可以进行条件检查以更改 IOS MarginTop 值，如下所示：

import React,  Component  from 'react';
import  View, TextInput, Platorm  from 'react-native';

export class Login extends Component 

    render() 
      return (
          <View style= marginLeft: 100 >
                <View style= marginTop: Platform.OS == 'android' ? 25 : 35 >
                    <TextInput
                        style= color: 'black', width: 260 
                        value='email'
                    />
                    <View style= marginTop: Platform.OS == 'android' ? -10 : -5,
                        borderBottomWidth: 1,
                        width: 200,
                        borderBottomColor: 'black'  />
                </View>

                <View style= marginTop: Platform.OS == 'android' ? 5 : 15>
                    <TextInput
                        style= color: 'black', width: 260 
                        value='password'
                    />
                    <View style= marginTop: Platform.OS == 'android' ? -10 : -5,
                        borderBottomWidth: 1,
                        width: 200,
                        borderBottomColor: 'black'  />
                </View>
          </View>
      );
    

我认为这应该可以正常工作。

【讨论】：

谢谢威廉！上帝？至少是 React 女神！ :) 您的第二个示例看起来更好，但我想了解为什么我们需要在高度相似的屏幕上使用不同的 marginTop 值...

【参考方案2】：

其他答案和评论很好，但他们没有回答我的问题... :) 我问为什么两个平台之间存在如此大的差异，而不是如何使用特定于平台的值进行修改。

我在这里找到了答案： react-native TextInput displays wrong when changing height on Android

引用：Android adds some default padding on top and bottom, you can reset them by adding paddingVertical: 0 to your element' style.

当指定paddingVertical: 0时，我们得到了预期的结果：

这是更新的代码：

import React,  Component  from 'react';
import  View, TextInput  from 'react-native';

export class Login extends Component 

    render() 
      return (
          <View style= marginLeft: 100 >
                <View style= marginTop: 25 >
                    <TextInput
                        style= color: 'black', width: 260, paddingVertical: 0 
                        value='email'
                    />
                    <View style= marginTop: 0,
                        borderBottomWidth: 1,
                        width: 200,
                        borderBottomColor: 'black'  />
                </View>

                <View style= marginTop: 15 >
                    <TextInput
                        style= color: 'black', width: 260, paddingVertical: 0 
                        value='password'
                    />
                    <View style= marginTop: 0,
                        borderBottomWidth: 1,
                        width: 200,
                        borderBottomColor: 'black'  />
                </View>
          </View>
      );