從 React 導航 header 調用 function（getParam 不是函數）

Question

我有這個圖標需要在單獨的文件中運行 function onLogout

首先我嘗試像這樣將導航參數傳遞給bottomTab選項

  <BottomTab.Screen
    name="Settings"
    component={Settings}
    options={(navigation) => ({
      title: "Settings",
      tabBarIcon: () => <Icon name="settings" size={20} color="black" />,
      headerRight: (
        <Icon
          onPress={navigation.getParam('onLogout')}
          style={{ marginRight: 14 }} name="log-out" size={18} color="black" />
      )
    })}
  />

在 function 所在的設置屏幕中，我已經像這樣初始化了 function

this.props.navigation.setParams({ onLogout: this.onLogout });

我在componentDidMount和componentWillMount里面試過

也試過綁定

constructor(props) {
    super(props);
    this.onLogout = this.onLogout.bind(this);
}

類型錯誤：navigation.getParam 不是 function。 （在 'navigation.getParam('onLogout')' 中，'navigation.getParam' 未定義）

在某一時刻 function 被執行但我沒有觸摸圖標但我改為這個

this.props.navigation.setParams({ onLogout: this.onLogout() });

由於那不起作用，我嘗試在文件本身中編寫選項

export default class Settings extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            headerRight: (
                <Icon
                    // onPress={navigation.getParam('onLogout')} 
                    style={{ marginRight: 14 }} name="log-out" size={18} color="black" />
            )
        };
    };
    ...

屏幕上沒有顯示任何圖標，並且該方法無法使用（標題等...）

Answer 1

嘗試這個：

 <BottomTab.Screen
    name="Settings"
    component={Settings}
    options={(props) => ({
      title: "Settings",
      tabBarIcon: () => <Icon name="settings" size={20} color="black" />,
      headerRight:() =>(
        <Icon
          onPress={()=>props.route.params.onLogout()}
          style={{ marginRight: 14 }} name="log-out" size={18} color="black" />
      )
    })}
  />