我如何在本机模式中使用制表符

Question

我有用于过滤搜索结果的模态，类似于foursquare app。我在不同类别中有过滤器，每个类别都需要使用标签。例如，当用户单击每个选项卡时，它会显示与该选项卡相关的过滤器。用户可以选择复选框或单选按钮。最后，当用户检查了所有需要的过滤器后，我需要使用新的过滤器发出http请求。

类似下面的图片。我创建了模式，但是我需要选项卡的功能，最后需要使用选定的选项来发出api请求：

Answer 1

您还可以使用带有状态的<Text>创建自定义标签，并根据状态值呈现与该标签关联的View。例如

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>
 )}
...

snack example

Answer 2

模态只是像View这样的容器。您可以在其中绘制任何内容。

首先，import {Modal} from 'react-native'
然后，在您的模式中，嵌入您想要的任何内容：

<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>

您可以从任何地方打开模态：

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

最后，对于标签，您可以使用以下任意一种：
NativeBase Tab Component
React Native Tab View