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

Question

[我在android（Galaxy S7）和iOS（iPhone S8 +）上测试了一个简单的render（），但得到的结果我不明白。

• S7的dp（与密度无关的像素）的高度为640，而iPhone 8 Plus的高度为736dp，因此我希望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>
      );
    }
}

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

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

我认为应该没问题。

Answer 2

其他答案和评论都不错，但是他们没有回答我的问题... :)我问了[[为什么两个平台之间有如此大的区别，而不是如何使用平台特定的值对其进行修改。

我在这里找到答案：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.

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