AntMobile tab 切換解決方案

yvanwangl發表於2017-10-11

專案地址

ant-mobile TabBar 元件配合 react-router-redux 的最佳實踐，堅定的眼神:)

故事背景： 最近在使用ant-mobile開發web app 應用，遇到TabBar元件切換問題，在ant-mobile的issues中搜到一些實踐案例，但是感覺並沒有完美解決這個問題，經過思考得出了下面這個最佳實踐。直接上程式碼，你需要關注的3個檔案及程式碼：

1、src/router/router.js

<Router history={history}>
<Route path='/' component={IndexPage}>
    <IndexRedirect to="/login"/>
    <Route path='/login' component={Login}/>
    <Route path='/home' component={HomePage}/>
    <Route component={HomePage}>
        <Route path='/customer/:type' component={Customer}/>
        <Route path='/agent/:type' component={Agent}/>
        <Route path='/store/:type' component={Store}/>
        <Route path='/user/:type' component={User}/>
    </Route>
    <Route path="/*" component={NotFoundPage}/>
</Route>
</Router>複製程式碼

定義路由，根據url匹配相應的元件

2、src/routers/HomePage/HomePage.js

render() {
    const {children} = this.props;
    return (
        <div className={styles.homePage}>
            <TabBarNav tabBarChildren={children}/>
        </div>
    );
}複製程式碼

將路由元件通過homePage傳入TabBarNav元件中

3、src/components/Common/TabBarNav/TabBarNav.js

<TabBar
    unselectedTintColor="#949494"
    tintColor="#33A3F4"
    barTintColor="white"
    hidden={this.state.hidden}
>
    <TabBarItem
        title={formatMessage(messages.customer)}
        key='customer'
        icon={<Icon type={shoppingCart} size="md" />}
        selectedIcon={<Icon type={shoppingCart} color={selectIconColor} size="md" />}
        selected={this.state.selectedTab === 'blueTab'}
        onPress={() => {
            this.setState({
                selectedTab: 'blueTab',
            });
            dispatch(routerRedux.push('/customer/customer'));
        }}
        data-seed="logId"
    >
        {tabBarChildren.props.params.type=='customer' ? tabBarChildren:null}
    </TabBarItem>
    <TabBarItem
        icon={<Icon type={dollar} size="md" />}
        selectedIcon={<Icon type={dollar} color={selectIconColor} size="md" />}
        title={formatMessage(messages.agent)}
        key="agent"
        selected={this.state.selectedTab === 'redTab'}
        onPress={() => {
            this.setState({
                selectedTab: 'redTab',
            });
            dispatch(routerRedux.push('/agent/agent'));
        }}
        data-seed="logId1"
    >
        {tabBarChildren.props.params.type=='agent' ? tabBarChildren:null}
    </TabBarItem>
    <TabBarItem
        icon={<Icon type={home} size="md"/>}
        selectedIcon={<Icon type={home} color={selectIconColor} size="md"/>}
        title={formatMessage(messages.store)}
        key='store'
        selected={this.state.selectedTab === 'greenTab'}
        onPress={() => {
            this.setState({
                selectedTab: 'greenTab',
            });
            dispatch(routerRedux.push('/store/store'));
        }}
    >
        {tabBarChildren.props.params.type=='store' ? tabBarChildren:null}
    </TabBarItem>
    <TabBarItem
        icon={<Icon type={user} size="md"/>}
        selectedIcon={<Icon type={user} color={selectIconColor} size="md"/>}
        title={formatMessage(messages.me)}
        key='me'
        selected={this.state.selectedTab === 'yellowTab'}
        onPress={() => {
            this.setState({
                selectedTab: 'yellowTab',
            });
            dispatch(routerRedux.push('/user/user'));
        }}
    >
        {tabBarChildren.props.params.type=='user' ? tabBarChildren:null}
    </TabBarItem>
</TabBar>複製程式碼

根據傳入元件的props.params.type判斷是否渲染tab頁內容。

簡單3步，大功告成，這樣既可實現通過react-router-redux控制路由跳轉，進一步控制相應的元件渲染，詳細程式碼可以檢視相應的檔案。

番外篇：

下面解釋下，在router.js中為什麼使用<Route path='/customer/:type' component={Customer}/> type 引數？

TabBar標準使用姿勢是：

<TabBar>
  <TabBar.Item><Component1 /></TabBar.Item>
  <TabBar.Item><Component2 /></TabBar.Item>
</TabBar>複製程式碼

這樣在切換不同tab項的時候，其他的元件也會渲染，只是給隱藏了起來，就像這樣：

為了避免切換時其他tab頁的元件渲染，所以在路由中引入了type引數，通過傳入的type引數控制不同tab頁內容的渲染。

覺得有幫助就來個Star :)

這裡是我de個人部落格

相關文章