react原生工作中的View和HTML中的Div一样吗

Question

我想呈现具有不同风格的多个元素，但View和子View不能像html中的div那样工作。请指导或分享一些资源，了解如何在退货中使用多个视图。

import React from 'react'
import { Button, StyleSheet, Text, View,ScrollView } from 'react-native';
export default function Home() {
return (
<View>

<View style={styles.container}>
<Text >
Books are the best Mentors
</Text>
</View>
<View>
<Text style={{backgroundColor:'red'}} >
Books are the best Mentors
</Text>
</View>
</View>
);
};


const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
container2: {
flex: 1,
backgroundColor: '#fff',
position:'absolute',
bottom:0
},
});

Answer 1

TL；DR<div>与<View>不同

这里可能的问题是<div>有不同的默认样式，您应该永远记住这一点。例如，RN中flexDirection的默认值是column，而不是像<div>那样的row。

尽管关于View的官方RN文档告诉我们：

View直接映射到React native运行的任何平台上的原生视图等价物，无论是UIView、<div>、android.View等。

我们应该始终牢记与我们合作的特定平台的具体情况。

我还建议您查看React Native中关于Flex样式的教程，以获得更好的使用体验。