负marginTop不能在Android上正常使用，在iOS上可以正常工作

Question

iOS和Android模拟器的示例。

代码：

<View style={styles.test}>
  <Text style={styles.header}>Header Example</Text>
  <Text>Lorem ipsum dolor sit amet</Text>
</View>

样式：

test: {
  borderWidth: 3,
  borderColor: "#000"
},
header: {
  marginTop: -10,
  backgroundColor: "yellow"
}

任何人都知道为什么会发生这种情况？谢谢！

Answer 1

负边距在Android上不起作用，因为默认溢出设置为Lambda上的hidden。

解决方法是使用react-native-view-overflow库而不是<View>。这样一来，您可以像预期的那样使用负边距。

https://github.com/entria/react-native-view-overflow

<View>

一旦添加到您的yarn add react-native-view-overflow 文件中，您需要对项目进行一些微调才能使其正常工作。

在package.json中：

android/gradle/wrapper/gradle-wrapper.properties

在-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip 中：

android/build.gradle

为了删除警告，请在buildscript { repositories { jcenter() + google() } dependencies { - classpath 'com.android.tools.build:gradle:2.2.3' + classpath 'com.android.tools.build:gradle:3.1.0' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files 中：

android/app/build.gradle

---

运行 compileSdkVersion 23 - buildToolsVersion "23.0.1" + buildToolsVersion "27.0.3" defaultConfig { ，您应该会很好。