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

Posted 2023-02-19

【中文标题】React-native - 基于用户位置的drawerLabel

【英文标题】：React-native - drawerLabel based on the user location

【发布时间】：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

【参考方案1】：

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

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

Read more here

【讨论】：

我想要一个不需要新组件的更简单的解决方案。

我不明白这怎么可能。在我看来，组件是一种从导航器配置中提取逻辑的简单而干净的方法。