如何在React Native中在屏幕中心创建自定义选项卡

我正在执行react本机应用程序。在这种情况下,一个屏幕在屏幕中央有自定义选项卡。

我的屏幕就像,

• 顶部视图大约200px高,显示一些文本行。
• 之后,自定义标签作为图片附加。
• 在那之后,我将显示第一个选项卡上的点击平面列表数据。

我已经检查了在线论坛和教程,根据标签栏,我们可以显示顶部或底部屏幕与标签。 但是,如何显示像我要求的定制选项卡。

我有4个选项卡,每个选项卡都有我在上面提到的相同的俯视图(一些文本行),如果我点击每个选项卡,就会显示不同的数据底页。

像,

• 第一个标签有一些简单的列表,
• 第二个标签带有一些文本行,
• 同样,所有选项卡在底部屏幕中的布局都不同。

因为我对本土人的反应很陌生。如何做到这一点? 由于隐私政策,我无法发布完整的屏幕截图。

这是我的密码。

屏幕,JS

 onClickTelugu = () => {
    alert("you clicked onClickTelugu")
   }
   onClickTamil = () => {
    alert("you clicked onClickTamil")

   }
   onClickHindi = () => {
    alert("you clicked onClickHindi")

    }
   onClickEnglish = () => {
    alert("you clicked onClickEnglish");
    }


 render(item) {
        return (
            <View style={styles.container}>
              <View style ={styles.Container}> 
              <Text style={styles.textStyle}>
                    Some Text
              </Text>
              <View style={styles.somestyles}>
              <TouchableOpacity onPress={this.onClick}>
                    <Image
                        style={styles.somestyles}
                        source={MenuImage}
                    />
                </TouchableOpacity>
                <TouchableOpacity onPress={this.onClick}>
                    <Image
                        style={styles.menuIcon}
                        source={MenuImage}
                    />
                </TouchableOpacity>
                </View>
              </View>
              <View style ={styles.somestyles}>
              <View style={styles.somestyles}>
              <Text style= {styles.somestyles}> 
                    Some Text
              </Text>
              <Text style= {styles.somestyles}> 
                    Some Text
              </Text>
              <Text style= {styles.somestyles} >
              <Text style= {styles.somestyles}>
                    Some Text
              </Text>
              <Text style ={styles.somestyles}>
                    Some Text
              </Text>
              </Text>
              </View>
              <View style={styles.somestyles}>
              <Text style={styles.somestyles}>some text</Text>
              <Text style={styles.somestyles} >some text</Text>
              <Text style={styles.somestyles}>date</Text>
              <Text style={styles.somestyles}>some other date</Text>
              </View>
              </View>
              </View>
           <View style = {styles.tabContainer}>
           <View style ={styles.tabInnerContainer}>
           <TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
                            <Image
                                style={styles.tabItemsImages}
                                source={image}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
                    </View>
                    <View style={styles.tabInnerContainer}>
                        <TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
                            <Image
                                style={styles.tabItemsImages}
                               source={image}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
                    </View>
                    <View style={styles.tabInnerContainer}>
                        <TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
                            <Image
                                style={styles.tabItemsImages}
                                source={image}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>

                    </View>
                    <View style={styles.tabInnerContainer}>
                        <TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
                            <Image
                                style={styles.tabItemsImages}
                               source={image}
                            />

               </TouchableOpacity>
               <Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>

                  </View>
              </View>
              <View style = {styles.flatListContainer}>  
                  <FlatList style = {styles.flatList}
                        showsVerticalScrollIndicator = {true}
                        data = {this.state.dataArray}
                        renderItem = {({item}) => (
                            <TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
                               <Image
                                style={styles.flatListArrowImage}
                               source={image}
                            />
                               </View>
                                <View style={styles.flatListItemInsideSeparator}>

                        )
                    }
                    ItemSeparatorComponent = {() => (
                        <View style={{height:15, backgroundColor:'#F8F8F8'}}/>
                    )}
                />
              </View>
          </View>
      );
    }
  }

我还必须显示覆盖选项卡图像。如果第1个舌片被攻丝,2,3,4 标签图片应该像高兴的图片一样。喜欢 突出显示/高兴的图像。