原文連結

還記得我們之前說過"我們講引數的時候會詳細說明"嗎？是的，就是現在。

現在我們知道怎樣建立一個包含若干路由的棧導航器，還知道了在路由之間跳轉，現在讓我們來看看跳轉時怎樣向路由傳遞資料。

有兩點：

1. 可以將引數放進物件中，作為navigation.navigate的第二個引數來向路由傳遞: this.props.navigation.navigate('RouteName', { /* params go here */ })
2. 在元件中讀取引數: this.props.navigation.getParam(paramName, defaultValue).

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
 

你也可以直接接收引數物件： this.props.navigation.state.params。如果沒有傳遞引數那麼可能為null，所以通常使用getParams更加簡便，不需要去處理null的情況。

如果你想直接通過props接收引數，比如this.props.itemId，你可以使用react-navigation-props-mapper.

總結

• navigate 和 push 接受可選的第二個引數來向目的路由傳遞引數，例如: this.props.navigation.navigate('RouteName', {paramName: 'value'}).
• 讀取引數可以通過： this.props.navigation.getParam
• 作為 getParam的後備選擇， 你也可以使用 this.props.navigation.state.params. 如果沒有指定引數，得到的結果是 null .