react native TabBarIOS
发布在react native2015年12月10日view:2281react-native
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

这里特指TabBarIOS, 安卓用户总爱贪小便宜,不付费,才懒得给他们写APP。这个组件是用于实现抽屉布局。在手机中,切换卡的触发按钮总是在下方,但也不用做成只在下方啊!

它是用两个自定义标签实现的。容器与触发切换的按钮,按钮里有包含渲染面板的逻辑。

panel {
  flex:1;
  padding-top: 30;
  justify-content:center;
  align-items: center;
}

panelText: {
  color: white;
  text-align: center;
  font-size: 16;
  padding-top: 20;
  line-height: 30;
}

主程序如下:


/**
 * 切换卡 司徒正美
 */
'use strict';


var React = require('react-native');
var {
  StyleSheet,
  TabBarIOS,
  Text,
  View,
  AppRegistry,
} = React;
var styles = require("./style")

var Tab = React.createClass({

  displayName: 'Tab',

  getInitialState: function() {
    return {
      selectedTab: 'blueTab'
    };
  },
  _renderPanel: function(color: string, pageText: string, index: number) {
    return (
      <View style={[styles.panel, {backgroundColor: color}]}>
        <Text style={styles.panelText}>{pageText}</Text>
        <Text style={styles.panelText}>{index}</Text>
      </View>
    );
  },

  render: function() {
    return (
      <TabBarIOS
        tintColor="white"
        barTintColor="#51c9d2">
        <TabBarIOS.Item
          title="蓝色按钮"
          selected={this.state.selectedTab === 'blueTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'blueTab',
            });
          }}>
          {this._renderPanel('#337ab7', 'Blue面板', 0)}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="红色按钮"
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'redTab'
            });
          }}>
          {this._renderPanel('#d9534f', 'Blue面板', 1)}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="绿色按钮"
          selected={this.state.selectedTab === 'greenTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'greenTab'
            });
          }}>
          {this._renderPanel('#a9ea00', 'Green面板', 2)}
        </TabBarIOS.Item>
       <TabBarIOS.Item
        title="黄色按钮"
        selected={this.state.selectedTab === 'yellowTab'}
        onPress={() => {
          this.setState({
            selectedTab: 'yellowTab'
          });
        }}>
        {this._renderPanel('#f0ad4e', 'Yellow面板', 3)}
      </TabBarIOS.Item>
    </TabBarIOS>
    );
  },

});


AppRegistry.registerComponent('AwesomeProject', () => Tab);

enter image description here

评论
发表评论
2年前

我也是这样做切合,但是发现一个问题,就是切换后原本的 component 并不会被卸载,如果里面有定时器,也就会一直保持运行,有啥办法啊

WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
react native

用于放置react native的相关文章

我的收藏