儿童组件未显示本机反应

Question

我正在尝试插入其他类中的组件，但只显示主屏幕的内容。

未渲染子组件的提示是什么？ 如果选择了selectedCategory of state，我想显示此声音的列表。否则，我会显示所有类别，但是不起作用。

主课（指导式冥想）

import Categories from '../../components/Categories';

export default class GuidedMeditation extends Component {
    

    constructor(props) {
                super(props);
        
                this.state = {
                  categorySelected: null,
                };
    
    }

    renderContent(categorie) {

        if(categorie) {
            console.log("list");

            return <MeditationLists />
        } else {
            console.log('categories');
            return  <Categories />
        }
    }

    render() {

    
        return (
            <Container>
                <View>
                    <Text style={styleProperties.titleGuidedMeditation}>
                        Categorias
                    </Text>
                    {this.renderContent(this.state.selectedCategory)}
                </View>
            </Container>
        );
    }
}

儿童（类别）

export default class Categories extends Component {

    
    render() {
       return(

    <Grid>
            <Row>
                <Col>
                    <ImageBackground source={require('../../assets/images/category01.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='wind' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory} >Meditações para Iniciante</Text>
                    </ImageBackground>
                </Col>
                <Col>
                    <ImageBackground source={require('../../assets/images/category02.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='moon' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Meditações Curtas</Text>
                    </ImageBackground>
                </Col>
            </Row>
            <Row>
                <Col>
                    <ImageBackground source={require('../../assets/images/category03.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='droplet' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Redução do Estresse</Text>
                    </ImageBackground>
                </Col>
                <Col>
                    <ImageBackground source={require('../../assets/images/category04.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='sun' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Meditações Longas</Text>
                    </ImageBackground>
                </Col>
            </Row>
            <Row>
                <Col>
                    <ImageBackground source={require('../../assets/images/category05.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                      <Icon type="Feather" name='activity' style={styleProperties.iconCategory}/>
                      <Text style={styleProperties.textCategory}>Movimentos Corporais</Text>
                    </ImageBackground>
                </Col>
                <Col>
                    <ImageBackground source={require('../../assets/images/category06.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                         <Icon type="Feather" name='list' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Todas as Meditações</Text>
                    </ImageBackground>
                </Col>
            </Row>
        </Grid>  
            )
    }
}

有解决的主意吗？

谢谢！