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

我正在做本地应用程序。在这种情况下，一个屏幕的中央有自定义选项卡

我的屏幕就像

• 俯视图，高度约为200像素，显示一些文本行
• 之后，将自定义选项卡作为图片附加
• 之后，我将显示点击平面列表数据的第一个选项卡

我查看了在线论坛和教程，根据选项卡栏，我们可以用选项卡显示顶部或底部屏幕。 但是，如何像我的要求一样定制显示选项卡

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

像

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

因为我是个新来的本地人。如何做到这一点？ 由于隐私政策，我无法发布完整的屏幕截图

这是我的密码

Screen.js

onClickTelugu=（）=>{
警报（“您单击了onClickTelugu”）
}
泰米尔语=（）=>{
警报（“您单击了泰米尔语”）
}
onClickHindi=（）=>{
警报（“你点击了印地语”）
}
onClickEnglish=（）=>{
警告（“你点击了英语”）；
}
渲染（项目）{
返回(
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
日期
改天
泰卢固
泰米尔人
印地语
英语
(
this.flatListItemHandler（项目）}>
)
}
ItemSeparatorComponent={（）=>(
)}
/>
);
}
}

我还必须显示覆盖标签图片。如果第一个凸耳被攻丝，则为2,3,4 标签图片应该像高兴的图片。喜欢 突出显示/高兴的图像

---

好的，您需要为该组件提供它自己的状态，以便跟踪您希望在下一部分显示的内容。然后，您应该将所有onClick事件替换为只传递不同语言的一个onClick事件。例如，

this.onClickTelugu

变为

（）=>this.onClick（'telugu'）

，那么onClick事件应该是：

onClick=（语言）=>{
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()}
     }
  }

类MyComponent扩展组件{
建造师（道具）{
超级（道具）
this.state={selectedLanguage:null}
}
onClick=（语言）=>{
this.setState（{selectedLanguage:language}）
}
renderBottomContent=（）=>{
const{selectedlanguage}=this.state
开关（选择的语言）{
“泰卢固”案：
返回泰卢固
“泰米尔”案：
返回泰米尔
“印地语”一案：
返回印地语
案例“英语”：
返回英语
违约：
返回未选择任何语言。。。
}
}
render（）{
...
this.onClick（'telugu'）}>
泰卢固
this.onClick（'tamil'）}>
泰米尔人
... 
//在所有其他选项卡按钮之后，根据组件状态渲染底部内容
{this.renderBottomContent（）}
}
}

创建自定义按钮怎么样。您可以使用

flexbox

轻松居中对齐，同时将其包装在

View

中。我喜欢这样做，但对于这些选项卡操作，我必须在底部屏幕中加载不同的页面（数据）。如果你能分享一些你被绊倒的代码，社区可以帮助你：）代码更新，请检查once@Firu代码已更新，请检查您是否正确理解我的查询，我在底部屏幕中无法加载不同的布局，例如，我有4个选项卡，第一个选项卡数据如tableview（平面列表），第二个标签有不同的数据，等等。是的，只要用你想看到的内容替换文本标签就行了。它可以是图像、表视图、平面列表或任何内容。你想显示什么并不重要——我只是告诉你如何控制用标签按钮显示不同的东西。对于switch语句中的每种情况，您希望返回什么取决于您自己<代码>泰米尔语可替换为 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()} } }