Передача компонента для рендеринга по "Компоненту", а не по " " - PullRequest
0 голосов
/ 14 февраля 2020

Я разрабатываю собственную реализацию "BottomBar" ... Поэтому я хочу передать Screen для рендеринга по его имени ... Проблема здесь в том, что он работает, только когда я передаю экран как тег, а не как компонент.

  <BottomBar>
    <BottomTab screen={HomeScreen}>
      <Text>Home</Text>
      <Icon name='home' />
    </BottomTab>
  <BottomTab screen={<HomeScreen/>}>
    <Text>Drill&Game</Text>
    <Icon name='logo-game-controller-a' />
  </BottomTab>
</BottomBar>

Bottombar пытается отобразить переданный экран следующим образом ...

    render(){           

    // Defining nativebase
    // Passing open screen inside the content
    let nativebase = <Container>
                        <Content>{this.screen(this.state)}</Content>
                        <Footer>
                            <FooterTab>{childs}</FooterTab>
                        </Footer>
                  </Container>;



    // Rendering either one or the other based on the configs.
    return nativebase;
}

/**
 * Returns the fitting screen for the open tab.
 * Once we click on a tab, this gets called as a callback in order to
 * Change the screen... BottomTab contains a array of 
 * @param {} props 
 */
screen = (props) => {

    let openScreen = props.screen;
    return this.state.screens[openScreen];
}

HomeScreen - это простой класс с конструктором и методом визуализации для правильного отображения экрана. ... это не функция или лямбда.

Ооо, каким-то образом экран отображается правильно, когда я передаю его как тег ... но не когда я передаю его имя ... Есть идеи, почему это происходит?

...