React Native使用div标签报错，如何在ReactJS中使用div？

一、React Native中不能用div的核心原因 #

React Native是面向移动端的框架，不支持任何HTML标签（包括div、p等），它有自己的原生组件体系：

• 布局容器需用View组件替代div
• 所有文本内容必须嵌套在Text组件内
  你在React Native项目里引入了RN的Text、StyleSheet，却使用了Web端的div标签，RN无法识别该标签，因此触发报错。

二、ReactJS中使用div的正确方式 #

ReactJS是面向Web端的框架，完全支持HTML标签，div的使用和普通HTML一致：

1. 直接在组件中书写div标签，支持className、style等属性
2. 示例代码：

import React from 'react';

function App() {
  return (
    <div className="container">
      <div className="header">
        <h1>Hello ReactJS</h1>
      </div>
      <div className="content">
        <p>这是一个用div布局的ReactJS组件</p>
      </div>
    </div>
  );
}

export default App;

• 注意：ReactJS中需用className而非class（class是JavaScript关键字）
• 内联样式需用对象形式：<div style={{ color: 'red', fontSize: 16 }}>示例文本</div>

三、你的React Native代码修正方案 #

将代码中的div全部替换为RN的View组件，样式通过StyleSheet定义，文本必须放在Text组件内：

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

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Hello React Native</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    padding: 10,
    backgroundColor: '#eee',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

export default App;

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