react tabs 初体验
背景
使用 react 来做一个导航。
官方给出了效果示例。
初体验
安装
$ npm install --save rc-tabs
结果
+ rc-tabs@9.5.2 added 12 packages from 13 contributors in 12.014s
编写 js 代码
import Tabs, { TabPane } from 'rc-tabs'; import TabContent from 'rc-tabs/lib/TabContent'; import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar'; var callback = function(key){ } ReactDOM.render( ( <Tabs defaultActiveKey="2" onChange={callback} renderTabBar={()=><ScrollableInkTabBar />} renderTabContent={()=><TabContent />} > <TabPane tab='tab 1' key="1">first</TabPane> <TabPane tab='tab 2' key="2">second</TabPane> <TabPane tab='tab 3' key="3">third</TabPane> </Tabs> ), document.getElementById('t2'));
准备 CSS 文件
将 activeKey 中的 index.css
文件拿起来,放在 src 目录下 tab.css
中,
再在 js 文件中引入 CSS 文件,如下:
import Styles from './tab.css';
参考
- react-component tabs
- react-native navigation: 这些是 react-native 的,不适用于 react.