如何在React Native中像Web项目使用div一样使用View组件？

本质不一样——div可以直接嵌套文本，但View作为纯粹的容器组件，是不允许直接放文本内容的，所有文本必须由组件来承载，否则就会触发报错。

下面给你几种解决办法，从简单到进阶都有：

1. 最直接的修改方式：手动用Text包裹文本 #

这是最基础的正确写法，把原来直接放在View里的文本，套一层组件就行：

错误写法（会报错）：

<View>sample text</View>

正确写法：

<View>
  <Text>sample text</Text>
</View>

2. 封装自定义「Div」组件，实现像div一样的无痛使用 #

如果不想每次都手动写，可以自己封装一个组件，让它自动帮你处理文本子节点，用法完全和div一致：

// 自定义Div组件（可以放在单独的文件里，比如components/Div.js）
import React from 'react';
import { View, Text } from 'react-native';

const Div = ({ children, ...props }) => {
  // 遍历所有子节点，把纯文本/数字类型的子节点自动包裹在Text里
  const processedChildren = React.Children.map(children, child => {
    if (typeof child === 'string' || typeof child === 'number') {
      return <Text>{child}</Text>;
    }
    // 如果是组件类型的子节点，直接原样返回
    return child;
  });

  return <View {...props}>{processedChildren}</View>;
};

export default Div;

之后使用的时候就可以像Web里用div一样随意：

// 直接放文本
<Div>这是一段不需要手动套Text的文本</Div>

// 混合嵌套组件也完全没问题
<Div style={{ padding: 15, backgroundColor: '#f5f5f5' }}>
  这是外层文本
  <Div style={{ marginTop: 10, borderLeftWidth: 2, borderLeftColor: 'blue', paddingLeft: 10 }}>
    嵌套的Div里的文本
    <Text style={{ color: 'red' }}>也可以直接用Text做样式定制</Text>
  </Div>
</Div>

3. 额外小技巧：纯文本场景直接用Text组件 #

如果只是单纯要显示一段带样式的文本，其实没必要套View——React Native的组件也支持大部分容器样式（比如padding、margin、backgroundColor等），直接用Text就能实现类似div的效果：

<Text style={{ padding: 10, backgroundColor: '#eee', borderRadius: 4 }}>
  我是一段带样式的文本，不需要套View
</Text>

这样几种方式下来，就能完全满足你像使用div一样使用RN组件的需求啦～

内容的提问来源于stack exchange，提问作者user10883635