Reactjs 使用带有react native的选项卡呈现动态内容

我正在开发一个应用程序，需要根据活动选项卡呈现不同的内容

我一直在尝试不同类型的条件渲染，但没有任何效果

这是我目前的代码：

handleTab=tab=>{
const{news}=this.state.news；
const{categories}=this.props；
const filtered=categories.filter(
category=>category.tags.includes（tab.toLowerCase（））
);
如果（制表符=='Codigos'）{
this.setState（{active:tab}）；
返回；
}
如果（制表符=='Servicios'）{
this.setState（{active:tab}）；
返回；
}
如果（制表符==‘通知’）{
this.setState（{active:tab}）；
返回；
}
};
渲染选项卡（选项卡）{
const{active}=this.state；
const isActive=活动===选项卡；
返回(
this.handleTab（tab）}
风格={[
“样式”选项卡，
isActive？styles.active:空
]}
>
{tab}
)
}
render（）{
const{profile，navigation}=this.props；
const{categories}=this.state；
const tabs=['Tab1'，'Tab2'，'Tab3']；
返回(
探险家
导航。导航（'Settings'）}>
{tabs.map（tab=>this.renderTab（tab））}
)
}

现在我可以渲染选项卡并设置活动选项卡，但无法渲染每个选项卡的内容

---

希望您能帮助我。

问题是您在

handleTab（）

中返回组件，该组件在渲染中的

onPress

handler中使用

这应该是：

setTab = tab => {
 this.setState({
   tab,
 });
}

handleTab = () => {
  const { tab } = this.state;
  if(tab === 'Codigos'){
    return <Content1 />;
  }
  // other conditions
}

// renderTab(tab)
<TouchableOpacity
  onPress={() => this.setTab(tab)} // <--- Set active tab
>
  <Text size={16} medium gray={!isActive} secondary={isActive}>
    {this.handleTab()} // <---- Render the returned component
  </Text>
</TouchableOpacity>

setTab=tab=>{
这是我的国家({
标签，
});
}
handleTab=（）=>{
const{tab}=this.state；
如果（制表符=='Codigos'）{
返回；
}
//其他条件
}
//渲染选项卡（选项卡）
this.setTab（tab）}//
{this.handleTab（）}//