如何分隔视图组件 React Native 的子项

Question

我想要一个 30px 的间隙；在我的卡片（视图）组件的所有子级之间。

return (
    <Card style={styles.screen}>
      <Text>...</Text>
      <Text>...</Text>
      <Button title='...' onPress={...} />
    </Card>
  )

const styles = StyleSheet.create({
  screen: {
    maxWidth: '80%',
    width: 200,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

我希望它们都有 30px 的空间；它们之间。如何使用 React Native 的样式表做到这一点？

Answer 1

<Card style={styles.screen}>
      <Text style={styles.screenText}>
</Card>


const styles = StyleSheet.create({
  screen: {
    maxWidth: '80%',
    width: 200,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  screenText: {
    paddingVertical: 30, //just do custom style for each component
  }
})