在使用TabBar和Tabs时发现几个问题，不知道是我写的不对还是怎么回事。

[zhulichao]

在使用TabBar和Tabs时，发现Drawer、ActionSheet、Modal、Popup、Progress都有问题。以下是index.android.js的代码，是能够运行的，包含了这几个组件。如果可以请看一下是我哪里写的不对还是怎么回事，非常感谢。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ScrollView } from 'react-native';
import { Button, TabBar, Tabs, Popup, Modal, Progress, ActionSheet, Drawer } from 'antd-mobile';

export default class AntdComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'blueTab',
      drawerOpen: true,
      modalVisible1: false,
      modalVisible2: false,
      percent1: 10,
      percent2: 40,
    };
    this.onDrawerChange = this.onDrawerChange.bind(this);
    this.showActionSheet = this.showActionSheet.bind(this);
    this.changePercent = this.changePercent.bind(this);
  }
  onPress(selectedTab) {
    this.setState({
      selectedTab
    })
  }
  onDrawerChange() {
    if (this.state.drawerOpen) {
      this.drawer.drawer.openDrawer();
    } else {
      this.drawer.drawer.closeDrawer();
    }
    this.setState({ drawerOpen: !this.state.drawerOpen });
  }
  showActionSheet() {
    const BUTTONS = ['操作一', '操作二', '操作三', '删除', '取消'];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      destructiveButtonIndex: BUTTONS.length - 2,
      title: '标题',
      message: '我是描述我是描述',
      maskClosable: true,
    });
  }
  onModalShow(type) {
    this.setState({
      [type]: true,
    });
  }
  onModalClose(type) {
    this.setState({
      [type]: false,
    });
  }
  showPopup() {
    Popup.show(<Text style={{fontSize:20, textAlign: 'center', margin: 20}}>Popup弹出内容</Text>);
  }
  changePercent(type) {
    let p = this.state[type] + 10;
    if (this.state[type] >= 100) {
      p = 0;
    }
    this.setState({ [type]: p });
  }
  render() {
    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="white"
      >
        <TabBar.Item
          title="基础"
          key="基础"
          icon={require('./components/alipay@3x.png')}
          selectedIcon={require('./components/alipay_sel@3x.png')}
          selected={this.state.selectedTab === 'blueTab'}
          onPress={this.onPress.bind(this, 'blueTab')}
        >
          <View style={styles.container}>
            <Text style={{fontSize: 20, textAlign: 'center', margin: 20}} >这里是正确的组件</Text>
            <Button onPress={this.onDrawerChange}>点击显示Drawer</Button>
            <Button onClick={this.onModalShow.bind(this, 'modalVisible1')}>点击显示Modal</Button>
            <Button onClick={this.changePercent.bind(this,'percent1')}>Progress(+-)10</Button>
            <Progress key="1" style={{marginVertical: 10}} percent={this.state.percent1} />
            <Text style={{fontSize: 20, color: 'red', textAlign: 'center', margin: 20}} >这里是出错的组件</Text>
            <Button onClick={this.showActionSheet}>点击显示ActionSheet</Button>
            <Button onClick={this.showPopup}>点击显示Popup</Button>
            <Modal
              title="这是 title"
              transparent
              maskClosable={false}
              visible={this.state.modalVisible1}
              footer={[{ text: '确定', onPress: this.onModalClose.bind(this, 'modalVisible1') }]}
            >
              <Text>这是内容...</Text>
            </Modal>
            <Drawer
              ref={ d => { this.drawer = d; } }
              sidebar={<Text>抽屉里的内容</Text>}
              drawerBackgroundColor='#A6A6A6'
              position="left"
            />
          </View>
        </TabBar.Item>
        <TabBar.Item
          title="导航"
          key="导航"
          icon={require('./components/koubei@3x.png')}
          selectedIcon={require('./components/koubei_sel@3x.png')}
          selected={this.state.selectedTab === 'redTab'}
          onPress={this.onPress.bind(this, 'redTab')}
        >
          <View style={styles.container}>
            <Tabs defaultActiveKey="1">
              <Tabs.TabPane tab="选项卡一" key="1">
                <Text>选项卡一</Text>
              </Tabs.TabPane>
              <Tabs.TabPane tab="出错组件" key="2">
                <Text style={{fontSize: 20, color: 'red', textAlign: 'center', margin: 20}} >这里是出错的组件</Text>
                <Button onPress={this.onDrawerChange}>点击显示Drawer</Button>
                <Drawer
                  ref={ d => { this.drawer = d; } }
                  sidebar={<Text>抽屉里的内容</Text>}
                  drawerBackgroundColor='#A6A6A6'
                  position="left"
                />
                <Button onClick={this.showActionSheet}>点击显示ActionSheet</Button>
                <Button onClick={this.onModalShow.bind(this, 'modalVisible2')}>点击显示Modal</Button>
                <Modal
                  title="这是 title"
                  transparent
                  maskClosable={false}
                  visible={this.state.modalVisible2}
                  footer={[{ text: '确定', onPress: this.onModalClose.bind(this, 'modalVisible2') }]}
                >
                  <Text>这是内容...</Text>
                </Modal>
                <Button onClick={this.showPopup}>点击显示Popup</Button>
                <Button onClick={this.changePercent.bind(this,'percent2')}>Progress(+-)10</Button>
                <Progress key="2" percent={this.state.percent2} />
                <Text style={{color: 'red'}} >这里有Progress不知道为啥没显示出来</Text>
              </Tabs.TabPane>
              <Tabs.TabPane tab="选项卡三" key="3">
                <Text>选项卡三</Text>
              </Tabs.TabPane>
            </Tabs>
          </View>
        </TabBar.Item>
        <TabBar.Item
          title="展示"
          key="展示"
          icon={require('./components/friend@3x.png')}
          selectedIcon={require('./components/friend_sel@3x.png')}
          selected={this.state.selectedTab === 'greenTab'}
          onPress={this.onPress.bind(this, 'greenTab')}
        >
          <View style={styles.container}><Text>展示</Text></View>
        </TabBar.Item>
        <TabBar.Item
          title="其它"
          key="其它"
          icon={require('./components/busi@3x.png')}
          selectedIcon={require('./components/busi_sel@3x.png')}
          selected={this.state.selectedTab === 'yellowTab'}
          onPress={this.onPress.bind(this, 'yellowTab')}
        >
          <View style={styles.container}><Text>其它</Text></View>
        </TabBar.Item>
      </TabBar>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('AntdComp', () => AntdComp);

[silentcloud]

@zhulichao 具体是什么问题，麻烦列举一下

[zhulichao]

以下问题都是在最外层是TabBar，在第二个TarBar.Item中是Tabs组件，在这里发现的问题。 1、Drawer、Popup 在Tabs里非第一个TabPane的时候失效，无法弹出，会返回第一个TabPane 2、Progress在Tabs里非第一个TabPane的时候，修改进度值回到第一个TabPane页 3、ActionSheet 在Tabs里时弹出会回到第一个TabPane页，然后进入了其它TabBar的Item，原来所在的那个TabBar.Item就像被卸载了一样点击也没反映

[zhulichao]

因为问题不是很好描述，所以我提供了可运行的代码，跑一下就能看到。我这里给一下第一个问题的截图。

[silentcloud]

@zhulichao 你这种情况 tabs 要指定 activeKey 的， 否则其他 state 一改变， render 重新执行了，就回到第一个 tab 标签了

 <Tabs activeKey={this.state.activeKey} onChange={(key) => this.setState({ activeKey: key  })} />

[zhulichao]

我添加上activeKey了，Modal没有问题了，其它问题更新如下： 1、Drawer 在Tabs里非第一个TabPane的时候没有弹出 2、Progress在Tabs里时没有显示出来 3、Popup 、ActionSheet 弹出后点击在点击其它地方，弹出框收回，但是然后进入了其它TabBar的Item，原来所在的那个TabBar.Item就像被卸载了一样点击也没反映

[silentcloud]

@zhulichao Progress 没出来是因为 Progress 需要由外层容器的大小来决定 Progress 的大小的， 比如外层外层嵌套一个 View ，给个高度就可以了； 至于 Drawer 不能弹出的问题，是使用问题，应该是 Tabs 放在 Drawer 里，而不应该是 Drawer 放在 tabs.pane 里吧（至少至今我没见过这种使用方式）

[zhulichao]

我刚才把TabPane中的第一层从View改成ScrollView后Progress就出来了，也试了按照您的意思在Progress外包一层View给heigth属性也能显示。非常感谢您的回答。

[silentcloud]

嗯， 至于跳出 tabbaritem 的问题，android 的 tabbar 是模拟 iOS 的，可能是 actionsheet 引起什么潜在问题，我这边还在进一步排查

[zhulichao]

又发现个问题，在TabBar的Item里面显示Toast提示时，如点击按钮显示Toast，Toast没有出现，而且就像ActionSheet似地，当前页面没有了，进入了TabBar的其它Item，点击页面无反映了。

[silentcloud]

Toast、ActionSheet 这几个 api 形式的组件由于 rn 没有 document.body.append 之类的，是用的模拟方法，有可能跟这个有关系，如果使用紧急的话，先使用对应的纯 component 组件来自己实现，见：

antd-mobile/lib/action-sheet/AndroidContainer.js antd-mobile/lib/action-sheet/ToastContainer.js

[zhulichao]

好的，谢谢啦。

[silentcloud]

@zhulichao 问题已经解决了，android 的 tab-bar 是利用 zIndex 实现的，toast\action-sheet\popup 在隐藏的时候会打乱页面的 zIndex，等周五的发布

[zhulichao]

动作非常快，给力！