如何在 React Native 的屏幕中央创建自定义标签

Question

我正在做 React Native 应用程序。其中，一个屏幕在屏幕中央有自定义选项卡。

我的屏幕是这样的，

顶部视图高度约为 200 像素，显示了一些文本行。
之后，自定义标签如附图。
之后，我在点击平面列表数据上显示第一个选项卡。

我查了网上的论坛和教程，根据tab bar，我们可以用tabs来显示top或者bottom screen。但是，如何显示符合我要求的自定义选项卡。

我有 4 个选项卡，每个选项卡都有我上面提到的相同的顶部视图（一些文本行），如果我点击每个选项卡，底部页面应该显示不同的数据。

喜欢，

带有一些平面列表的第一个选项卡，
带有一些文本行的第二个选项卡，
同样，所有选项卡在底部屏幕中都有不同的布局。

因为我对原生反应还很陌生。如何做到这一点？由于隐私政策，我无法post完整截图。

这是我的代码。

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

And I have to show overlay tab images too. If 1st tab tapped, 2,3,4 tabs images should be like delighted images. Like highlighted/delighted images.

Answer 1

好的，您需要为该组件提供它自己的状态，以跟踪您想要在下半部分显示的内容。那么您应该将所有的 onClick 事件替换为一个您传递不同语言的 onClick 事件。例如 this.onClickTelugu 变成 () => this.onClick('telugu')，那么你的 onClick 事件应该是：

onClick = (language) => { this.setState({selectedLanguage: language}) }

然后在你的 renderBottomContent 函数中，你可以根据 this.state.selectedLanguage 是什么渲染不同的东西。

类似...

    class MyComponent extends Component {
      constructor(props) {
        super(props)
        this.state = { selectedLanguage: null}
      }

      onClick = (language) => { 
        this.setState({selectedLanguage: language}) 
      }

      renderBottomContent = () => {
        const {selectedLanguge} = this.state
        switch(selectedLanguage) {
          case "telugu":
            return <View><Text>Telugu</Text></View>
          case "tamil":
            return <View><Text>Tamil</Text></View>
          case "hindi":
            return <View><Text>Hindi</Text></View>
          case "english":
            return <View><Text>English</Text></View>
          default:
            return <View><Text>No Language Selected...</Text></View>
        }
      }

      render() { 
         ...
        <View style ={styles.tabInnerContainer}>
          <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
            <Image style={styles.tabItemsImages} source={image} />
          <Text style={styles.tabTextItems}>
            Telugu
          </Text>
          </TouchableOpacity>
        </View>
        <View style ={styles.tabInnerContainer}>
          <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
            <Image style={styles.tabItemsImages} source={image} />
          <Text style={styles.tabTextItems}>
            Tamil
          </Text>
          </TouchableOpacity>
        </View>
    ... 
        // after all the other tab buttons, render bottom content depending on the component state
        {this.renderBottomContent()}
     }
  }

如何在 React Native 的屏幕中央创建自定义标签

How to create custom tabs in the centre of the screen in React Native

tabs

tabbar

react-native