React Native 应用程序具有相同的代码，但在 iOS 和 Android 中的垂直边距结果不同 [英] React Native app with same code but different result for vertical margins in iOS and Android

问题描述

我在 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';导出类登录扩展组件{使成为() {返回 (<视图样式={{ marginLeft: 100 }}><视图样式={{ marginTop: 25 }}><文本输入样式={{ 颜色:'黑色'，宽度:260 }}价值='电子邮件'/><视图样式={{ marginTop: -10,边框底部宽度:1，宽度:200，borderBottomColor: '黑色' }}/></查看><视图样式={{ marginTop: 5 }}><文本输入样式={{ 颜色:'黑色'，宽度:260 }}值='密码'/><视图样式={{ marginTop: -10,边框底部宽度:1，宽度:200，borderBottomColor: '黑色' }}/></查看></查看>);}}

这就是此代码在 Android Galaxy S7 模拟器(左)和 iPhone 8+ 模拟器上的显示方式.

解决方案

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

我在这里找到了答案:

这是更新后的代码:

import React, { Component } from 'react';import { View, TextInput } from 'react-native';导出类登录扩展组件{使成为() {返回 (<视图样式={{ marginLeft: 100 }}><视图样式={{ marginTop: 25 }}><文本输入样式={{ 颜色:'黑色'，宽度:260，paddingVertical:0 }}价值='电子邮件'/><视图样式={{ marginTop: 0,边框底部宽度:1，宽度:200，borderBottomColor: '黑色' }}/></查看><视图样式={{ marginTop: 15 }}><文本输入样式={{ 颜色:'黑色'，宽度:260，paddingVertical:0 }}值='密码'/><视图样式={{ marginTop: 0,边框底部宽度:1，宽度:200，borderBottomColor: '黑色' }}/></查看></查看>);}}

I tested a simple render() on android (Galaxy S7) and iOS (iPhone S8+), and I get results that I don't understand.

• The S7's height in dp's (Density-independent Pixels) is 640, while the iPhone 8 Plus height is 736 dp's, so I expected the distance between 'email' and 'password' to be somewhat smaller on the iPhone 8+, but not that tiny...
• The 2nd issue is negative margins, that seem to behave differently on the two platforms. Is that what one should expect?

(And, yes, I know that I can set different margins on the two platforms, but I want to understand why the results are so different from my expectations...)

This is my code:

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>
      );
    }
}

And this is how this code is displayed on an android Galaxy S7 emulator (left) and iPhone 8+ emulator.

解决方案

The other answer and comment were good, but they didn't answer my question... :)
I asked why there is such a difference between the two platforms and not how it can be modified with platform specific values.

I found the answer here: react-native TextInput displays wrong when changing height on Android

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

When specifying paddingVertical: 0, we get the expected results:

This is the updated code:

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>
      );
    }
}

这篇关于React Native 应用程序具有相同的代码，但在 iOS 和 Android 中的垂直边距结果不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！