React Native 速成 003 — 底部导航Tabbar

之前介绍了 Card 和 ScrollView，我们现在来看一下底部导航 Tabbar。

我们在上一节原先的基础上增加 Tabbar 组件。

react-native-elements 的 Tabbar 组件文档再此：
https://react-native-training.github.io/react-native-elements/API/tabbar/

基本使用如下：

import { Tabs, Tab, Icon } from 'react-native-elements'

constructor() {
  super()
  this.state = {
    selectedTab: 'profile',
  }
}

changeTab (selectedTab) {
  this.setState({selectedTab})
}

/* 以下是 render() 函数内容 */
const { selectedTab } = this.state

<Tabs>
  <Tab
    titleStyle={{fontWeight: 'bold', fontSize: 10}}
    selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
    selected={selectedTab === 'feed'}
    title={selectedTab === 'feed' ? 'FEED' : null}
    renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
    renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
    onPress={() => this.changeTab('feed')}>
    <Feed /> /* 这里嵌入你的展示组件，可从其他文件import */
  </Tab>
  <Tab
    titleStyle={{fontWeight: 'bold', fontSize: 10}}
    selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
    selected={selectedTab === 'profile'}
    title={selectedTab === 'profile' ? 'PROFILE' : null}
    renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
    renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
    onPress={() => this.changeTab('profile')}>
    <Profile /> /* 这里嵌入你的展示组件，可从其他文件import */
  </Tab>
  /* ... more tabs here */
</Tabs>

默认Profile Tab 点击切换到Feed Tab

综合代码如下：

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Card, ListItem, Button } from 'react-native-elements';
import { Tabs, Tab, Icon } from 'react-native-elements';

const users = [
 {
    name: 'apple',
    avatar: 'http://iph.href.lu/50x50?text=apple'
 },
 {
    name: 'banana',
    avatar: 'http://iph.href.lu/50x50?text=banana'
 },
 {
    name: 'cat',
    avatar: 'http://iph.href.lu/50x50?text=cat'
 },
 {
    name: 'dog',
    avatar: 'http://iph.href.lu/50x50?text=dog'
 },
]


export default class App extends React.Component {

  // 设定tab选择状态
  constructor() {
    super()
    this.state = {
      selectedTab: 'profile',
    }
  }

  // changeTab 将改变 this.state.selectedTab
  changeTab (selectedTab) {
    this.setState({selectedTab})
  }

  render() {
    // this.state.selectedTab  赋予 selectedTab，使用更方便
    const { selectedTab } = this.state

    return (
      <Tabs>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'feed'}
          title={selectedTab === 'feed' ? 'FEED' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
          onPress={() => this.changeTab('feed')}>
          
          <ScrollView>
            <Text> Card </Text>
            <Card containerStyle={{padding: 0}} >
              {
                users.map((u, i) => {
                  return (
                    <ListItem
                      key={i}
                      roundAvatar
                      title={u.name}
                      avatar={{uri:u.avatar}} />

                  )
                })
              }
            </Card>
            <Card
              title='HELLO WORLD'
              image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>
              <Text style={{marginBottom: 10}}>
                The idea with React Native Elements is more about component structure than actual design.
              </Text>
              <Button
                icon={{name: 'code'}}
                backgroundColor='#03A9F4'
                buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
                title='VIEW NOW' />
            </Card>
          </ScrollView>
        </Tab>

        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'profile'}
          title={selectedTab === 'profile' ? 'PROFILE' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
          onPress={() => this.changeTab('profile')}>
          <ScrollView>
            <Card
              title='HELLO WORLD'
              image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>
              <Text style={{marginBottom: 10}}>
                The idea with React Native Elements is more about component structure than actual design.
              </Text>
              <Button
                icon={{name: 'code'}}
                backgroundColor='#03A9F4'
                buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
                title='VIEW NOW' />
            </Card>
          </ScrollView>
        </Tab>
      </Tabs>

    );
  }
}

一般来说 Tabbar 下嵌套几个页面级别的 Component，如ScrollView或ListView。点击Tab就可以切换啦。

这里的 Tabbar 还支持隐藏功能，可以实现下滑 ScrollView 隐藏 Tabbar 等效果，这些我们以后介绍。