Родная базовая условная кнопка в заголовке - PullRequest
Новая
       10

Родная базовая условная кнопка в заголовке

0 голосов
/ 28 июня 2019

У меня есть следующий компонент заголовка: 

class HeaderNav extends Component {
  render() {
    return (
       <Header style={styles.header}>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.openDrawer() }>
              <Icon name="bars" size={25} color="#D35920" />
            </Button>
          </Left>
          <Body>
                // body content 
          </Body>
          <Right style={styles.headerRight}>
             <Button onPress={() => this.props.doSomething}>
                <Title>{this.props.rightTitle!= null ? this.props.rightTitle}</Title>
             </Button>
          </Right>
        </Header>
    )
  }
}

И я хотел бы отобразить содержимое в правом компоненте на основе каждого экрана, указав заголовок в конструкторе следующим образом: 

    constructor(props) {
      super(props);

      this.state = {
          rightTitle: 'Title'    
      }

      this.doSomething= this.doSomething.bind(this);
    }


    doSomething= () => {        
      // logic goes here
    }

И затем рендеринг компонента: 

render(){
  return(){
    <HeaderNav />
  }
}

1 Ответ

1 голос
/ 28 июня 2019

Прежде всего, я настоятельно рекомендую вам изучить все это состояние / реквизит. Если вы видите свою функцию рендеринга, вы не передаете ни одного реквизита в заголовок. Следовательно, у вас не будет правого заголовка в вашей кнопке.

Ваш метод визуализации 

render(){
  return(){
    <HeaderNav rightTitle="your desired rightTitle"/>
  }
}

Если вы хотите использовать правый заголовок, который вы объявили в состоянии: 

render(){
  return(){
    <HeaderNav rightTitle={this.state.rightTitle}/>
  }
}

Затем вы сможете получить доступ к this.props.rightTitle в вашем HeaderNav Компоненте. См. Реквизит

...