View：什么是容器属性和React Native

什么是React Native中的View

View是React Native的基础组件，用作其他组件的容器。它支持通过StyleSheet进行样式设置，通过Flexbox进行布局，以及触摸处理、动画和变换。View是对原生容器元素的抽象：iOS上的UIView和Android上的android.view.View。

在React Native中不能使用HTML元素——所有布局都由View构建。甚至Text和Image通常也包裹在View中进行定位。组件可以是空的（仅容器）或包含任意数量的任意深度的子元素。

View支持从同一JavaScript代码在两平台上进行渲染。Flexbox属性、边距、背景、阴影和边框在iOS和Android上工作方式相同。平台差异很小——例如，iOS上的阴影使用shadowColor/shadowOffset，而Android上使用elevation。

根据React Native Layout Docs, 2024，View针对移动设备进行了优化：在flatten优化期间不会创建不必要的原生视图，并在父样式更改时正确处理级联更新。

View组件的属性和API

View组件拥有丰富的props集合，用于管理外观、位置和交互性。所有props分为几类：样式、触摸事件、可访问性和平台特性。让我们看看关键组。

View的样式props

View支持移动平台的所有标准CSS属性。其中关键的包括：用于定位的flexDirection、justifyContent、alignItems；用于间距的margin、padding；用于外观的backgroundColor、borderRadius；用于尺寸的width、height、maxHeight。

触摸事件和手势

View可以通过onStartShouldSetResponder、onMoveShouldSetResponder和onResponderGrant props处理触摸事件。这些事件允许无需库即可实现自定义手势。对于标准点击，使用onTouchStart、onTouchEnd和onPress（通过Pressable或TouchableOpacity）。

平台props

在iOS上，shadowColor、shadowOffset、shadowOpacity、shadowRadius可用于阴影。在Android上，这些属性被忽略——取而代之的是使用elevation。当View尺寸更改时，会调用onLayout回调，这对于自适应布局非常有用。

使用View和Flexbox进行布局

Flexbox是React Native中唯一的布局机制（与Web不同，Web中可用Grid和Float）。所有元素的定位都通过View组件的Flexbox属性进行。默认情况下，View的flexDirection设置为column，而不是Web中的row，这符合移动屏幕的垂直方向。

View中的主要Flexbox属性

flexDirection确定主轴方向：column（默认）或row。justifyContent管理沿主轴的分布（flex-start、center、space-between）。alignItems——沿交叉轴（stretch——默认值）。flex确定子元素可用空间的份额。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

示例展示了典型结构：外部View——卡片，内部row——带有头像和文本块的行，content——带有姓名和角色的列。这种嵌套的View结构是每个React Native屏幕的标准。

View与HTML div的区别

虽然View在概念上类似于HTML div，但它们之间存在关键区别，在将代码从Web迁移到React Native时需要理解这些区别。这些区别涉及渲染、样式和默认行为。

最重要的区别——默认flexDirection: column。这意味着没有显式设置时，子元素垂直排列，而非水平。第二个区别：View的width和height默认扩展到父元素的所有可用空间（相当于CSS中的width: 100%）。

View的实际示例

让我们看两个在React Native应用中使用View的实际示例：全屏居中对齐内容和创建自适应的卡片网格。这两种模式在每个项目中都会遇到。

示例1：带居中的占位屏幕

创建空状态（empty state）时，使用flex: 1和在两个轴上居中的View。这是加载、错误和空列表屏幕的标准模式。

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

在flex: 1的View中组合justifyContent: center和alignItems: center，可以在两个轴上将内容居中到整个屏幕。这是React Native中最常见的View使用模式。

示例2：使用Flexbox的卡片网格

要显示两列产品或文章，使用flexDirection: row、flexWrap: wrap和固定宽度的子View。这种模式取代了React Native中的CSS Grid。

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

在此示例中，带有flexWrap: wrap的外部View充当CSS Grid的对应物。每个卡片占据48%的宽度，列之间留有间隙。这是目录和内容源的典型模式。