Question

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

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

这是我的代码：

handleTab = tab => {
        const { news } = this.state.news;
        const { categories } = this.props;
        const filtered = categories.filter(
            category => category.tags.includes(tab.toLowerCase())
        );
        if(tab === 'Codigos'){
            this.setState({ active: tab});
            return <Content1 />;
        }
        if(tab === 'Servicios'){
            this.setState({ active: tab });
            return <Content2 />;
        }
        if(tab === 'Noticias'){
            this.setState({ active: tab});
            return <Content3 />;
        }
    };


renderTab(tab) {
        const { active } = this.state;
        const isActive = active === tab;

        return (
            <TouchableOpacity
                key={`tab-${tab}`}
                onPress={() => this.handleTab(tab)}
                style={[
                    styles.tab,
                    isActive ? styles.active : null
                ]}
            >
                <Text size={16} medium gray={!isActive} secondary={isActive}>
                    {tab}
                </Text>
            </TouchableOpacity>
        )
    }
render() {
        const { profile, navigation } = this.props;
        const { categories } = this.state;
        const tabs = ['Tab1', 'Tab2', 'Tab3'];

        return (
            <Block>
                <Block flex={false} row center space="between" style={styles.header}>
                    <Text h1 bold>Explorar</Text>
                    <Button onPress={() => navigation.navigate('Settings')}>
                        <Image
                            source={profile.avatar}
                            style={styles.avatar}
                        />
                    </Button>
                </Block>

                <Block flex={false} row style={styles.tabs}>
                    {tabs.map(tab => this.renderTab(tab))}
                </Block>



            </Block>
        )
    }

现在，我可以呈现选项卡并设置活动的选项卡，但不能呈现每个选项卡的内容。

希望你能帮助我。

Answer 1

问题是您要返回handleTab()中的组件，该组件在渲染器中的onPress处理程序中不是使用。

这应该是：

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>

为简洁起见，省略了代码的其他部分。

使用带有react-native的选项卡渲染动态内容

1 个答案: