基于Native Base实现头部栏右侧按钮的条件渲染问题

Let's fix this step by step to get your HeaderNav rendering dynamic right-side content based on different pages. First, let's address the issues in your existing code, then implement the correct approach.

Key Issues in Your Current Code #

1. Missing Props Passing: When you render <HeaderNav />, you aren't passing the necessary props (navigation, rightTitle, doSomething) that the component relies on.
2. Incomplete Conditional Rendering: Your Title component has a broken ternary expression (this.props.rightTitle!= null ? this.props.rightTitle — missing the else clause).
3. Redundant Binding: You're using an arrow function for doSomething which automatically binds this, so the bind call in the constructor is unnecessary.
4. Invalid Render Syntax: The parent component's render method has return(){ ... } which is incorrect — it should be return(...) with JSX inside.

Corrected HeaderNav Component #

First, let's rewrite the HeaderNav to properly accept and use props for dynamic content:

import React, { Component } from 'react';
import { Header, Left, Body, Right, Button, Icon, Title } from 'native-base'; // Assuming you're using NativeBase

class HeaderNav extends Component {
  render() {
    // Destructure props for cleaner code
    const { navigation, rightTitle, doSomething } = this.props;

    return (
      <Header style={styles.header}>
        <Left>
          <Button transparent onPress={() => navigation.openDrawer()}>
            <Icon name="bars" size={25} color="#D35920" />
          </Button>
        </Left>
        <Body>
          {/* Optional: You can also pass the page title via props if needed */}
          <Title>App Title</Title>
        </Body>
        <Right style={styles.headerRight}>
          {/* Only render the button if rightTitle exists to avoid empty UI */}
          {rightTitle && (
            <Button onPress={doSomething} transparent>
              <Title>{rightTitle}</Title>
            </Button>
          )}
        </Right>
      </Header>
    );
  }
}

// Example styles (adjust to your needs)
const styles = {
  header: {
    backgroundColor: '#ffffff',
  },
  headerRight: {
    marginRight: 10,
  },
};

export default HeaderNav;

Using HeaderNav in Different Pages #

Now, in each of your page components, you can pass unique rightTitle and doSomething props to customize the header:

Page A (e.g., Save Button)

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import HeaderNav from './HeaderNav';

class PageA extends Component {
  // Arrow function auto-binds `this`, no need for constructor bind
  handleSave = () => {
    // Add your Page A logic here (e.g., save form data)
    console.log('Save action triggered from Page A');
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <HeaderNav
          navigation={this.props.navigation}
          rightTitle="Save"
          doSomething={this.handleSave}
        />
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Page A Content</Text>
        </View>
      </View>
    );
  }
}

export default PageA;

Page B (e.g., Search Button)

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import HeaderNav from './HeaderNav';

class PageB extends Component {
  handleSearch = () => {
    // Add your Page B logic here (e.g., open search modal)
    console.log('Search action triggered from Page B');
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <HeaderNav
          navigation={this.props.navigation}
          rightTitle="Search"
          doSomething={this.handleSearch}
        />
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Page B Content</Text>
        </View>
      </View>
    );
  }
}

export default PageB;

Why This Works #

• Props-Driven Customization: The HeaderNav component is now reusable — each page defines its own right-side title and action by passing props.
• Conditional Rendering: The right button only appears when rightTitle is provided, preventing empty or broken UI.
• Cleaner Binding: Arrow functions eliminate the need for manual this binding in the constructor.

内容的提问来源于stack exchange，提问作者Mandalina