TouchableOpacity enabled/disabled 使用异步承诺

Question

首先，touchableOpacity 按钮在反应导航中 header。我像这样创建一个 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>
      )
    })
  })

我在另一个文件中有一个异步函数，我用它来return一个布尔值：

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
  }

}

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

Answer 1

正如我在评论中所写，这里的危急情况是，在 navigationOptions 中，您只能依靠 navigation 道具来 re-render header .我首先想到的是 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 现在知道是时候 re-render!

TouchableOpacity enabled/disabled 使用异步承诺

TouchableOpacity enabled/disabled using an async promise

async-await

es6-promise

react-native

touchableopacity

react-navigation