React-native - 基于用户位置的drawerLabel答案

【问题标题】：React-native - drawerLabel based on the user locationReact-native - 基于用户位置的drawerLabel
【发布时间】：2019-05-04 01:58:37
【问题描述】：

我有一个 react-native 应用程序，我需要根据用户位置呈现一个菜单项，但是返回用户位置的函数是一个异步函数，我得到一个未定义的函数，所以我的问题是如何我根据用户位置设置navigationOptions的drawerLabel值？

static navigationOptions = () => ({
    drawerLabel: () => (OptionsDrawer.isOptionsItemAvaliable() ? 'Options' : null)
})




private static isOptionsItemAvaliable() {
    navigator.geolocation.getCurrentPosition((result) => this.setUserLocation(result.coords), ()=> {console.log("Failed to load user location")};
    return verifyUserLocation(userLocation);
}

private static setUserLocation(coordinates){
    userLocation = coordinates; //userLocation is a global variable
}

private static verifyUserLocation(coordinates){
//Code to check the user location and returns if it's inside the allowed area
}

【问题讨论】：

标签： javascript reactjs typescript react-native asynchronous

【解决方案1】：

尝试用自定义组件替换标题。在组件中，您可以将位置保持为您在位置更改时更新的状态。像这样的：

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
  };
}