react 实现tab切换 页面接口刷新

一、需求

react-native底部tab有两个单元，首页A和个人中心B；首次加载tab A和tab B的时候，页面都会刷新，但是之后的切换操作都不会进行页面刷新。
现需要在个人中心B进行相关操作后，点击首页A，A页面中的数据也需要刷新。

二、解决

方法一：

Ant Design 依次提供了三级选项卡，分别用于不同的场景。

import React from 'react';
import { Tabs } from 'antd';
const onChange = (key) => {
  console.log(key);
};
const App = () => 
  <HTabs defaultActiveKey='1' onChange={onChange}>
   <HTabs.TabPane tab="页面1" key="1">页面1</HTabs.TabPane>
   <HTabs.TabPane tab="页面2" key="2">页面2</HTabs.TabPane>
   <HTabs.TabPane tab="页面3" key="3">页面3</HTabs.TabPane>
  </HTabs>;

export default App;

---

方法二：

import React from 'react';
import { Tabs } from 'antd';
const onChange = (key) => {
  console.log(key);
};
const items = [
  {
    key: '1',
    label: 'Tab 1',
    children: 'Content of Tab Pane 1',
  },
  {
    key: '2',
    label: 'Tab 2',
    children: 'Content of Tab Pane 2',
  },
  {
    key: '3',
    label: 'Tab 3',
    children: 'Content of Tab Pane 3',
  },
];
const App = () => <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;
export default App;

---

方法三：

 const changeType = e => {
    setType(e)
  }

  const tabItems = [
    {
      label: 页面1,
      key: TIMELINE_KEYS.TIMELINE,
      cont: <one />
    },
    {
      label: 页面2,
      key: TIMELINE_KEYS.FILES,
      cont: <two/>
    },
    {
      label: 页面3,
      key: TIMELINE_KEYS.VISUAL,
      cont: <three/>
    }
  ]

  return (
    <div className="search-timeline">
      <Tabs activeKey={type} onChange={changeType}>
        {tabItems.map(i => (
          <TabPane tab={i.label} key={i.key}>
            {i.cont}
          </TabPane>
        ))}
      </Tabs>
    </div>
  )

---

方法四：

const [tabKey, setTabKey] = useState('1')
  const tabItems = [
    {
      key: '1',
      label: 'Item概览'
    },
    {
      key: '2',
      label: 'Item描述'
    },
    {
      key: '3',
      label: '生命周期'
    },
  ]
const renderContent = type => {
   switch (type) {
      case '1':
        return <ItemDetailsData />
      case '2':
        return <StructDetail />
      case '3':
        return <LifeCycle />
   }
}
const onchangeTab = key => setTabKey(key)



<Tabs defaultActiveKey={tabKey} onChange={onchangeTab}>
     {tabItems.map(i => (
        <TabPane tab={i.label} key={i.key} />
     ))}
</Tabs>

{renderContent(tabKey)}