android - 负 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 上不起作用，因为默认溢出设置为 hidden在 <View> .

修复是使用 react-native-view-overflow 库而不是 <View> .这将允许您像预期的那样使用负边距。

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

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 {

---

运行 yarn run android你应该可以开始了。