用React Hooks函数式组件实现切换tabs
import React, { useState } from "react";
const Tabs = props => {
// 初始化 state,存储当前激活 tab 的索引
const [activeIndex, setActiveIndex] = useState(0);
// 接收 props 传入的 tab 标题数组
const { tabList } = props;
// 切换 tab 页的函数
const onTabChange = index => {
setActiveIndex(index);
};
// 渲染 tab 标题
const renderTabList = () => {
return tabList.map((item, index) => {
return (
<View
className={activeIndex === index ? "tab-active" : "tab"}
onClick={() => {
onTabChange(index);
}}
key={index}
>
{item}
</View>
);
});
};
// 渲染对应 tab 页的内容
const renderContent = () => {
return props.children[activeIndex];
};
return (
<View>
{renderTabList()}
<View>{renderContent()}</View>
</View>
);
};
export default Tabs;
小编尽力啦!!!!!!!!