React-navigation 官方文档中文翻译(三) Configuring the Header

版本号: 1.0.0-beta.12

Configuring the Header

---

Header仅适用于StackNavigator.     在前面的例子中，我们创建了一个StackNavigator来在我们的应用程序中显示几个屏幕。导航到聊天屏幕时，可以通过将其提供给导航功能来指定新路由的参数。在这种情况下，我们要在聊天屏幕上提供该人的姓名：

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

 user 参数可以在chat 界面被接收

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

设置header title

接下来，header title可以配置为使用屏幕参数：

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

添加右按钮

然后我们可以添加一个header导航选项，允许我们添加一个自定义的右按钮：

static navigationOptions = {  headerRight: <Button title="Info" />,  ...

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

现在，标题可以与屏幕路线/状态进行交互：

React-navigation 官方文档中文翻译(四) intro to Navigators