RN的TabBarIOS组件使用

TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能。

TabBarIOS.Item

属性

View相关属性样式全部继承。

• badge （string,number ）
  在图标的右上方显示小红色气泡，显示信息。

• icon （ Image.propTypes.source ）
  Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略。

• selectedIcon （Image.propTypes.source ）
  设置当Tab按钮被选中时，显示的自定义图标。如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色。

-title （ string）
在Tab按钮的标题信息。

• systemIcon
  系统预定义的图标。枚举('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')
  如果使用这些图标，那么上面设置的标题，选中的图标都会被覆盖。

• selected （bool ）
  标志子页面是否可见。如果你看到一个空白的内容页面，那么很可能是忘记选中任何的一个页面标签Tab。

方法

• onPress
  当Tab按钮被选中的时候进行回调，你可以设置selected={true}来设置组件被选中。

TabBarIOS

属性

• barTintColor （color ）
  设置tab条的背景颜色。

• tintColor
  当前选中图标的颜色。

• translucent （bool ）
  设置Tab栏是不是半透明的效果。

示例

class TabBarIOSDemo extends Component {
  constructor(props){
    super(props);
    this.state={
         selectedTab: '历史',
         notifCount: 0,
         presses: 0,
    };
  }
  //进行渲染页面内容
  _renderContent(color: string, pageText: string, num?: number) {
    return (
      <View style={[styles.tabContent, {backgroundColor: color}]}>
        <Text style={styles.tabText}>{pageText}</Text>
        <Text style={styles.tabText}>第 {num} 次重复渲染{pageText}</Text>
      </View>
    );
  }
  render() {
    return (
      <View style={{flex:1}}>
        <Text style={styles.welcome}>
          TabBarIOS使用实例
        </Text>
        <TabBarIOS
        style={{flex:1,alignItems:"flex-end"}}
        tintColor="white"
        barTintColor="darkslateblue">
        <TabBarIOS.Item
          title="自定义"
          icon={require('./images/flux.png')}
          selected={this.state.selectedTab === '自定义'}
          onPress={() => {
            this.setState({
              selectedTab: '自定义',
            });
          }}
          >
          {this._renderContent('#414A8C', '自定义界面')}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          systemIcon="history"
          selected={this.state.selectedTab === '历史'}
          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
          onPress={() => {
            this.setState({
              selectedTab: '历史',
              notifCount: this.state.notifCount + 1,
            });
          }}
          >
          {this._renderContent('#783E33', '历史记录', this.state.notifCount)}
        </TabBarIOS.Item>
        <TabBarIOS.Item
           systemIcon="downloads"
           selected={this.state.selectedTab === '下载'}
            onPress={() => {
            this.setState({
              selectedTab: '下载',
              presses: this.state.presses + 1
            });
          }}>
           {this._renderContent('#21551C', '下载页面', this.state.presses)}
        </TabBarIOS.Item>
 
      </TabBarIOS>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 20,
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

效果 ： http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/03/tabarios.gif