如何为这些元素之间的垂直空间添加样式？

Question

我正在RN中创建一个新的登录页面。下面的所有组件都在视图中完美对称地堆叠。但是，我想在组件之间包括一些空间。根据下面显示的布局和样式，最简单，最合适的方法是什么？

  <View style={styles.container}>
    <TextInput placeholder="Email" />
    <TextInput placeholder="Password" />
    <Button title="TEST"></Button>
  </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
  },
})

Answer 1

最基本，最简单的方法是在组件之间提供Margin值。

  

保证金

     

设置边距与设置marginTop的效果相同，   marginLeft，marginBottom和marginRight。看到   https://developer.mozilla.org/en-US/docs/Web/CSS/margin了解更多   详细信息。

用法

export default class App extends React.Component {
  render() {
    return (
       <View style={styles.container}>
    <TextInput style={styles.textInput} placeholder="Email" />
    <TextInput style={styles.textInput} placeholder="Password" />
    <Button title="TEST"></Button>
  </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 20
  },
});