如何间隔一个View组件的子组件

Question

我想要一个30px的间距;在my card (View)组件的所有子组件之间。

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
}
})