Question

我有以下标头组件：

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>
    )
  }
}

我想通过在构造函数中说明标题，如下所示，根据每个屏幕在Right Component中渲染内容：

    constructor(props) {
      super(props);

      this.state = {
          rightTitle: 'Title'    
      }

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


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

然后渲染组件：

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

Answer 1

首先，我强烈建议您学习所有关于状态/道具的知识。如果看到渲染功能，则说明您没有将任何prop传递给标题。因此，您的按钮将没有任何rightTitle。

您的渲染方法

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

如果您要使用在状态下声明的rightTitle：

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

然后，您将可以在this.props.rightTitle组件中访问HeaderNav。 See Props

标头中的基于本机的条件按钮

1 个答案: