React native 如何在react native中的模式中使用选项卡

我有过滤搜索结果的模式，比如foursquare应用程序。我有不同类别的过滤器，我需要为每个类别使用选项卡。例如，当用户单击每个选项卡时，它会显示与该选项卡相关的过滤器。用户可以选择复选框或单选按钮。最后，当用户检查所有需要的过滤器时，我需要使用新的过滤器发出http请求

如下图所示。我创建了模式，但我需要选项卡的功能，并在最后使用所选选项发出api请求：

---

Modal只是一个类似容器的视图。你可以在里面画任何东西

首先，从“react native”导入{Modal} 然后，在模式中，嵌入您想要的任何内容：

<Modal visible={ this.state.modal }
animationType="fade" transparent={true}
onRequestClose={_ => this.setState({ modal: false }) }>
    <View>
        {/* 
            Do anything. Its an open ground.
            Whatever component, styles, props and/or anything else you want, you can design
        */}

        {/* For example, I am adding a close button */}
        <TouchableOpacity style={{ alignSelf: 'flex-end' }} onPress={_ => this.setState({ modal: false }) }>
            <Icon type="FontAwesome" name='times' style={ styles.closeIcon } />
        </TouchableOpacity>
    </View>
</Modal>

您可以从任何位置打开您的modal，如：

<TouchableOpacity style={ styles.button } onPress={_ => this.setState({ modal: true }) }>
    <Text style={ styles.buttonText }>Open Modal</Text>
</TouchableOpacity>

最后，对于选项卡，您可以使用以下任一选项：

---

您还可以使用with state创建自定义选项卡，并根据状态值呈现与该选项卡关联的视图。比如说

state = {
  modalVisible: false,
  currentTab: 1,
};

onTabClick = (currentTab) => {
  this.setState({
    currentTab: currentTab,
  });
};

// inside render
<Modal
  animationType="slide"
  transparent={true}
  visible={this.state.modalVisible}
  onRequestClose={() => {
  Alert.alert('Modal has been closed.');
  }}>

<View style={styles.tabs}>
  <Text
    onPress={() => {
      this.onTabClick(1);
    }}
    style={[
      styles.tabTextStyle,
      this.state.currentTab === 1 ? styles.tabUnderline : null,
    ]}>
    GENDER
  </Text>
  ...
</View>

{this.state.currentTab === 1 && (
   <View>
     <Text>GENDER</Text>
   </View>
 )}
...

---

我们应该知道更多！有什么问题吗？甚至你也可以写tab视图！这是我的问题。如何在modalUse中创建此类选项卡