React-Navigation-标题配置

Configuring the Header

标题仅适用于StackNavigator。
在前面的例子中，我们创建了一个StackNavigator来显示我们的应用程序中几个屏幕。
当导航到聊天屏幕时，我们可以用navigation函数指定新路由的参数。 在这种情况下，我们希望在聊天画面上提供该人的姓名：

this.props.navigation.navigate('Chat', { user:  'Lucy' });

user参数可以从chat屏幕访问：

class ChatScreen extends React.Component {
  render() {
    const { params } = this.props.navigation.state;
    return Chat with {params.user};
  }
}

设置header 标题

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  ...
}

增加一个右导航按钮

我们可以添加一个标题 navigation options，允许我们添加一个自定义的右按钮：

static navigationOptions = {
  headerRight: ,
  ...

navigation options 可以用navigation prop 来定义。 让我们渲染一个基于路由参数的不同的按钮，并设置按钮按下时调用navigation.setParams。

static navigationOptions = ({ navigation }) => {
  const { state, setParams } = navigation;
  const isInfo = state.params.mode === 'info';
  const { user } = state.params;
  return {
    title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
    headerRight: (
       setParams({ mode: isInfo ? 'none' : 'info' })}
      />
    ),
  };
};

标题与屏幕组件交互

有时，标题需要访问屏幕组件的属性，例如function或state;
比方说，我们要创建一个“编辑联系人信息”屏幕，在标题中有一个保存按钮。 我们希望保存按钮在保存时被ActivityIndicator替换。

class EditInfoScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    let headerRight = (
       null}
      />
    );
    if (params.isSaving) {
      headerRight = ;
    }
    return { headerRight };
  };

  state = {
    nickname: 'Lucy jacuzzi'
  }

  _handleSave = () => {
    // Update state, show ActivityIndicator
    this.props.navigation.setParams({ isSaving: true });
    
    // Fictional function to save information in a store somewhere
    saveInfo().then(() => {
      this.props.navigation.setParams({ isSaving: false});
    })
  }

  componentDidMount() {
    // We can only set the function after the component has been initialized
    this.props.navigation.setParams({ handleSave: this._handleSave });
  }

  render() {
    return (
       this.setState({ nickname })}
        placeholder={'Nickname'}
        value={this.state.nickname}
      />
    );
  }
}

Note:
由于handleSave-param仅在组件安装时设置，因此不能立即在navigationOptions-function中使用。在设置handleSave之前，我们向Button组件传递一个空函数，以便立即渲染并避免闪烁。
要查看其余的标题options，请参阅导航选项文档。

As an alternative to setParams, you may want to consider using a state management library such as MobX or Redux, and when navigating to a screen, pass an object which contains the data necessary for the screen to render, as well as functions you may want to call that modify the data, make network requests and etc. That way, both your screen component and the static navbarOptions block will have access to the object. When following this approach, make sure to consider deep linking, which works best in cases where only javascript primitives are passed as navigation props to your screen. In case when deep linking is necessary, you may use a higher order component (HOC) to transform the primitives to the object your screen components expects.

previous: Nesting Navigators
next: screen nav options