css - React Native 边距作用于对象内部，而不是外部

Question

转到 https://snack.expo.io/HJV601djf并打开 login_screen/components/Form.js。如您所见，textInput 具有样式

  textInput: {
    flex:1,
    height: 50,
    marginBottom: 20
  }

您可以看到用户图标未与文本输入对齐。如果我取出 marginBottom ，一切正常，但是使用 marginBottom: 20 图标会被取消对齐。我可能也可以通过使文本输入也垂直对齐来解决这个问题，但我不知道问题的原因。

如果只在外部添加空间，marginBottom 会如何影响 UserInput 的内部？

如果您不想等待加载应用程序，请打印屏幕:

Answer 1

发生这种情况是因为，在您的 UserInput.js 中，您试图合并 textInput 的样式，而 图像/图标 样式保持不变，因此未对齐。

解决这个问题的最佳方法是向组件添加一个 textInputContainer 样式，并将边距设置为

TextInput.js

<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>

Form.js

<UserInput
          containerStyle={styles.textInputContainer}
          style={styles.textInput}
          source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
          placeholder="e-mail"
          autoCapitalize={'none'}
          returnKeyType={'done'}
          autoCorrect={false}
        />

和样式

textInputContainer : {
        marginBottom: 20
  },

这是 snack同样