import React useState from react;import TabBar from antd-mobile;import FontAwesomeIcon from fortawesomereact-fontawesome;import faHome faEnvelope faCog from fortawesomefree-solid-svg-icons;con

根据提供的代码，首页没有展示内容的原因可能是因为renderContent函数中的pageText参数与判断条件不匹配。在代码中，判断条件为if (pageText === '首页')，而TabBar.Item的title为"首页"，所以renderContent函数中的pageText应该改为"首页"才能正确匹配。

修改后的代码如下：

import React, { useState } from 'react';
import { TabBar } from 'antd-mobile';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faEnvelope, faCog } from '@fortawesome/free-solid-svg-icons';

const DemoTabBar = () => {
  const [selectedTab, setSelectedTab] = useState('home');

  const renderContent = (pageText) => {
    if (pageText === '首页') {
      return (
        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
          <div style={{ paddingTop: 60 }}>当前页: {pageText}</div>
          <div style={{ marginTop: 20 }}>
            <h3>个人信息</h3>
            <ul>
              <li>姓名: 张三</li>
              <li>年龄: 30</li>
              <li>性别: 男</li>
              <li>所在城市: 北京市</li>
            </ul>
          </div>
        </div>
      );
    } else {
      return (
        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
          <div style={{ paddingTop: 60 }}>当前页: {pageText}</div>
        </div>
      );
    }
  };

  return (
    <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
      <TabBar
        unselectedTintColor="#888"
        tintColor="#33A3F4"
        barTintColor="white"
      >
        <TabBar.Item
          title="首页"
          key="home"
          icon={<FontAwesomeIcon icon={faHome} />}
          selectedIcon={<FontAwesomeIcon icon={faHome} />}
          selected={selectedTab === 'home'}
          onPress={() => setSelectedTab('home')}
        >
          {renderContent('首页')}
        </TabBar.Item>
        <TabBar.Item
          title="消息"
          key="message"
          icon={<FontAwesomeIcon icon={faEnvelope} />}
          selectedIcon={<FontAwesomeIcon icon={faEnvelope} />}
          selected={selectedTab === 'message'}
          onPress={() => setSelectedTab('message')}
        >
          {renderContent('消息')}
        </TabBar.Item>
        <TabBar.Item
          title="设置"
          key="setting"
          icon={<FontAwesomeIcon icon={faCog} />}
          selectedIcon={<FontAwesomeIcon icon={faCog} />}
          selected={selectedTab === 'setting'}
          onPress={() => setSelectedTab('setting')}
        >
          {renderContent('设置')}
        </TabBar.Item>
      </TabBar>
    </div>
  );
};

export default DemoTabBar;

这样修改后，首页应该会显示"个人信息"相关内容