使用异步承诺启用/禁用 TouchableOpacity答案

【问题标题】：TouchableOpacity enabled/disabled using an async promise使用异步承诺启用/禁用 TouchableOpacity
【发布时间】：2020-07-06 07:07:17
【问题描述】：

首先，touchableOpacity 按钮位于反应导航标题中。我像这样创建一个stackNavigator：

import { DownloadedToday } from './src/components/Functions'
const navigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
    params: {
      button: false,
    },
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerTitle: '',
      headerRight: () => (
        <TouchableOpacity style={styles.headerRight}
          disabled = {***boolean***}
        >
          <AntDesign
            name = 'download'
            size = {23}
            color = 'grey'
          />
        </TouchableOpacity>
      )
    })
  })

我在另一个文件中有一个异步函数，用于返回布尔值：

export const DownloadedToday = async() => {
  //get the current date
  let currentDate = new Date().toDateString()
  //get the last download date
  let lastUpdate = await RetrieveData('downloadDate')

  if(lastUpdate === currentDate){
    return true
  }else{
    return false
  }

}

从函数返回布尔值完全没有问题。我认为问题在于我正在使用 Promise，所以我不能只分配一个变量并将其插入 - 异步函数总是返回 Promise。我是这些问题的新手，所以我有最艰难的时间试图弄清楚如何使用异步功能并将其插入到 TouchableOpacity disabled 道具中。任何帮助都非常感谢

【问题讨论】：

DownloadedToday 包含在哪里？它是一个反应组件，一个也是导航屏幕的组件还是只是一个普通的 javascript 文件？
@vitosorriso - 它只是一个普通的 javascript 文件。就像我上面说的 - DownloadedToday 功能工作正常。它导入也很好 - 但它输出一个承诺 - 我需要布尔值。不知道如何在我需要的地方获取布尔值
好的。这里的问题不在于这是异步代码，因为使用 async/await 机制，您可以在 promise 解决时简单地分配一个结果。真正的问题是您需要将 navigation 属性更新为 navigationOptions 以处理重新渲染到标题中。我有一个解决这个问题的想法，但是 DownloadedToday 函数需要进入导航系统才能操作该道具。
@vitosorriso 我已经改变了它。我也移动了函数
所以你想让我写一个答案来解决导航系统内部的这个问题？

标签： react-native async-await react-navigation es6-promise touchableopacity

【解决方案1】：

正如我在 cmets 中所写，这里的危急情况是，在 navigationOptions 中，您可以只依靠 navigation 属性来重新渲染标题。我首先想到的是 React Context API，但您无法访问那里的上下文。

基本上，您的 DownloadedToday 函数需要位于作为导航系统一部分的 React 屏幕中，以便更改导航道具：不错的想法可能是创建一个自定义挂钩来获取值并在当前屏幕中使用它（如果你问我，我也可以向你展示）。
在屏幕中包含您的自定义挂钩并订阅其更改：

const { lastUpdate } = useYourCustomHook()
useEffect(() => {
  //
}, [lastUpdate])

现在我们可以使用导航参数：这个想法是编辑一个特定的参数来负责禁用按钮，我们称之为disableHeaderButton；假设这个将默认为 false（按钮默认启用），useEffect 将变为：

useEffect(() => {
  // if lastUpdate is true, we will trigger a navigation action which will disable the button
  if (lastUpdate) navigation.setParams({ disableHeaderButton: true })
}, [lastUpdate])

编辑您的stackNavigator 以便为disableHeaderButton 参数设置默认值！
像这样将navigationOptions 编辑到您的堆栈中：

    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerTitle: '',
      headerRight: () => (
        <TouchableOpacity
          style={styles.headerRight}
          disabled={navigation.state?.routes[navigation.state.index].params?.disableHeaderButton}
        >
          <AntDesign
            name = 'download'
            size = {23}
            color = 'grey'
          />
        </TouchableOpacity>
      )
    })

什么是navigation.state?.routes[navigation.state.index].params?.disableHeaderButton？

通过这个表达式，你告诉 react-navigation 查看当前活动屏幕的参数（routes 是由当前state.index 索引的路由数组），所以如果参数被编辑，你的导航header 现在知道是时候重新渲染了！

【讨论】：

完美。谢谢！