通过父级反应本地风格

Question

style.js

export default StyleSheet.create({
main: {
flex: 1,
alignItems: "center",
backgroundColor: '#f0efce'
},
parent: {
margin: 2,
flexDirection: "row",
alignItems: "center"
}
});

index.js

class index extends Component {
render () {
return (
<SafeAreaView style={style.main}>
<View style={style.parent}>
<Text>... Sample1</Text>
<Text>... Sample2</Text>
</View>
</SafeAreaView>
)
}
}

我的问题是，我可以从<View style={style.parent}>设计<Text>吗？我想要的是通过<View style={style.parent}>给<Text>一个余量。有人能解释一下吗，我只学了几天反应母语，ty…

Answer 1

通过在视图中应用父样式，父样式容器的每个子容器都将包含您应用的样式的属性，如<Text>

Answer 2

您应该为text组件提供fontSize、fontFamily、color等文本样式，为View组件提供margin、padding、backgroundColor等样式。

在上面的情况下，如果你想让文本有一些空间，你应该给像这样的文本组件的样式留出空间

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={{ margin: 2 }}>Sample 1</Text>
<Text style={{ margin: 2 }}>Sample 2</Text>
</View>