碎碎念

問題：

使用react-navigation接收navigation帶回來的參數，並且在navigationOptions中定義header區塊按鈕onPress時呼叫自訂function時，會直接出現"function is undefined"的錯誤訊息。

EX:

static navigationOptions = ({ navigation }) => ({
      headerRight: <RightButton onPress={() => this.removeVehicle()} />
})

會直接跳出"removeVehicle function undefined"錯誤訊息。

答：

1. button onPress改為呼叫navigation.getParam('自訂參數')

2. 增加一個"componentDidMount" function，名稱是訂死的不能改。

function裏頭去呼叫navigation.setParams，把定義的參數設到原本的function。

EX:

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state

    return {
        headerRight: <RightButton onPress={navigation.getParam('handleRemove')} />
    }
}

componentDidMount () {
    this.props.navigation.setParams({ handleRemove: this.removeVehicle })
}

--

參考自

https://reactnavigation.org/docs/en/header-buttons.html

https://github.com/react-navigation/react-navigation/issues/2013