React-Navigation 头部设置

头部只只适用于StackNavigator组件。

1.传值

在前面例子中，我们创建了类似聊天 app的一个StackNavigator。切换卡左侧是好友列表，右侧是最近聊天。
现在我们点击一个好友，出现聊天界面，并且聊天界面中有从列表中传递过来的参数。
如下的方式可以实现：
this.props.navigation.navigate('Chat', { user: 'Lucy' });
我们知道 通过props给父组件设置一个值，子组件就可以接收到值。

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

OK！！这样就完成了传值。

2.设置头部标题
设置屏幕头部参数。

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

3.为头部右侧添加一个按钮，比如返回，详情等
然后，我们可以添加一个标题导航选项，让我们可以添加自定义的右按钮。

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: (
      <Button
        title={isInfo ? 'Done' : `${user}'s info`}
        onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
      />
    ),
  };
};