導航實驗屬性`onNavigateBack`找不到

Question

我正在研究一個react-native項目，並且最近從0.26升級到0.30。 導航實驗收到了相當數量的更改，特別是在命名（NavigationRoute,NavigationState，...）方法onNavigate方法NavigationCardStack的變更後變爲onNavigateBack。

我正在使用流程0.27.0檢查我的代碼。

所以這裏是我從流得到的錯誤。

app/containers/MyContainer.js:99 
99:   <NavigationCardStack 
       ^props of React element `NavigationCardStack` 
67: type Props = NavigationSceneRendererProps & { 
               ^property `onNavigateBack`. Property not found in. See: node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js:67 
113:    {...props} 
         ^^^^^ spread of identifier `props` 

app/containers/MyContainer.js:112 
112:   <NavigationHeader 
       ^React element `NavigationHeader` 
67: type Props = NavigationSceneRendererProps & { 
               ^property `onNavigateBack`. Property not found in. See: node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js:67 
113:    {...props} 
         ^^^^^ spread of identifier `props` 

而這裏是錯誤發生的代碼。 this.props.onNavigateBack從redux的connect方法中獲得其價值。

class MyContainer extends Component { 
    props: Props; 

    render() { 
     return (
      <NavigationCardStack 
       navigationState={this.props.navigationState} 
       onNavigateBack={this.props.onNavigateBack} 
       renderOverlay={props => this._renderNavigationHeader(props)} 
       renderScene={scene => (<View />)} 
       style={styles.container} 
      /> 
     ) 
    } 

    _renderNavigationHeader(props) { 
     return (
      <NavigationHeader 
       {...props} 
       style={styles.header} 
       textStyle={styles.title} 
       renderLeftComponent={props => (<View />)} 
       renderRightComponent={props => (<View />)} 
       renderTitleComponent={props => (<View />)} 
      /> 
     ) 
    } 
} 

我試圖使代碼儘可能短，注意Props型我聲明包含onNavigateBack爲() => void。

Answer 1

好吧，我明白了。我假設renderOverlay通過onNavigateBack給它的方法，但似乎並非如此。不確定，但我認爲它仍然是onNavigate。

所以解決的辦法是直接參考this.props.onNavigateBack，而不是通過展開運算符查看props。

_renderNavigationHeader(props) { 
    return (
     <NavigationHeader 
      {…props} 
      onNavigateBack={this.props.onNavigateBack} 
      style={styles.header} 
      textStyle={styles.title} 
      renderLeftComponent={props => (<View />)} 
      renderRightComponent={props => (<View />)} 
      renderTitleComponent={props => (<View />)} 
     /> 
    ) 
}