ReactNative中TabBarIOS

在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件

TabBarIOS常见的属性

View的所有属性都可以被继承
barTintColor：设置tab条的背景颜色
tintColor：设置tab条上被选中图标的颜色
translucent ：bool值，设置Tab栏是不是半透明的效果

TabBarIOS.Item常见的属性

View的所有属性都可以被继承
badge：在图标的右上方显示小红色气泡，显示信息
icon：自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略
onPress ：点击图标的回调，你可以设置selected={true}来设置组件被选中
selected ：该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定没有选中任何的一个页面标签
selectedIcon ：当按钮被选中的时候显示的自定义图标，如果- systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色
systemIcon ：系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。
enum(‘bookmarks’,’contacts’,’downloads’,’favorites’,’featured’,’history’,’more’,’most-recent’,’most-viewed’,’recents’,’search’,’top-rated’)
title ：按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略

代码实现

加载一个空的TabBarIOS

export default class App11 extends Component<{}> {
  render() {
    return (
      <View style={{flex:1}}>
        <TabBarIOS ></TabBarIOS>
      </View>
    );
  }
}

效果：
这里写图片描述

加载TabBarIOS.Item，用系统图标

export default class App11 extends Component<{}> {
  render() {
    return (
      <View style={{flex:1}}>

        <TabBarIOS >
          <TabBarIOS.Item
            systemIcon="contacts"
          >
          </TabBarIOS.Item>

          <TabBarIOS.Item
            systemIcon="history"
          >
          </TabBarIOS.Item>

          <TabBarIOS.Item
            systemIcon="downloads"
          >
          </TabBarIOS.Item>
        </TabBarIOS>
      </View>
    );
  }
}

效果：
这里写图片描述

添加其他属性

export default class App11 extends Component<{}> {
  render() {
    return (
      <View style={{flex:1}}>

        <TabBarIOS

          barTintColor="orange" // TabBarIOS背景色
          tintColor="blue"       // 被选中标签颜色
          translucent={true}    // TabBarIOS不需要半透明效果
        >
          <TabBarIOS.Item
            systemIcon="contacts" //系统图标
            badge="6"             //红色角标
          >
          </TabBarIOS.Item>

          <TabBarIOS.Item
            renderAsOriginal={true} // 如果为false，只会显示纯色图片
            title="demo"  //文字（如果设置了系统图标，那么这个属性会被忽略）
          >
          </TabBarIOS.Item>

          <TabBarIOS.Item
            systemIcon="history"
          >
          </TabBarIOS.Item>

        </TabBarIOS>
      </View>
    );
  }
}

效果：
这里写图片描述

TabBarIOS.Item点击（ selected 和 onPress）
- 预设当前点击的item,一般默认0
```
constructor(props) {
    super(props);
    this.state = {
      selectedTab: '0'//预设当前点击的item,一般默认0
    }
  }
```
- 点击的时候onPress需要更新状态机中预设变量的值
```
onPress={() => {
        this.setState({
          selectedTab: '2'
        })}}
```
- 根据预设变量判断跳转到的页面（当预设变量的值改变后，状态机会再次调用 render 函数进行渲染，也就会调用 TabBarIOS.Item 内的 selected 属性）
```
selected={this.state.selectedTab === '3'}
```

完整代码与效果


export default class App11 extends Component<{}> {

  constructor(props) {
    super(props);

    this.state = {
      selectedTab: '0'    // 预设当前点击的item,一般默认0
    }
  }


  render() {
    return (
      <View style={{flex:1}}>


        <TabBarIOS

          barTintColor="orange" // TabBarIOS背景色
          tintColor="blue"       // 被选中标签颜色
          translucent={true}    // TabBarIOS不需要半透明效果
        >


          <TabBarIOS.Item
            systemIcon="contacts" //系统图标
            badge="6"             //红色角标
            selected={this.state.selectedTab === '1'}
            onPress={() => {
            this.setState({
              selectedTab: '1'
            })}}
            Î
          >

            <View style={styles.viewStyle}><Text style={{textAlign:'center'}}>第一页</Text></View>

          </TabBarIOS.Item>


          <TabBarIOS.Item
            renderAsOriginal={true} // 如果为false，只会显示纯色图片
            title="demo"  //文字（如果设置了系统图标，那么这个属性会被忽略）
            selected={this.state.selectedTab === '2'}
            onPress={() => {
            this.setState({
              selectedTab: '2'
            })}}
          >

            <View style={styles.viewStyle}><Text style={{textAlign:'center'}}>第二页</Text></View>

          </TabBarIOS.Item>

          <TabBarIOS.Item
            systemIcon="history"
            selected={this.state.selectedTab === '3'}
            onPress={() => {
            this.setState({
              selectedTab: '3'
            })}}
          >
            <View style={styles.viewStyle}><Text style={{textAlign:'center'}}>第三页</Text></View>

          </TabBarIOS.Item>

        </TabBarIOS>
      </View>
    );
  }
}

const styles = StyleSheet.create({


  viewStyle: {
    backgroundColor: 'orange',
    marginTop: 25,
    height: 44,
    alignContent: 'center',
    justifyContent: 'center',
  },


  textStyle: {
    textAlign: 'center',
    width: 100,
    height: 100,
    backgroundColor: 'red'
  }

})

效果：
这里写图片描述

ReactNative中TabBarIOS

TabBarIOS常见的属性

TabBarIOS.Item常见的属性

代码实现

猜你喜欢