TouchableOpacity включается / отключается с помощью асинхронного c обещания - PullRequest
Новая
       61

TouchableOpacity включается / отключается с помощью асинхронного c обещания

0 голосов
/ 25 марта 2020

Прежде всего, кнопка 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>
      )
    })
  })

У меня есть функция asyn c в другом файле, который я использую для возврата логического значения: 

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
  }

}

Нет проблем при возврате логическое от функции. Я думаю, проблема в том, что я работаю с обещаниями, поэтому я не могу просто присвоить переменную и подключить ее - функции asyn c всегда возвращают обещание. Я новичок в этих вопросах, поэтому у меня самое трудное время, когда я пытаюсь понять, как использовать функцию asyn c и подключить ее к отключенной программе TouchableOpacity. Любая помощь СУПЕР приветствуется

1 Ответ

0 голосов
/ 25 марта 2020

Как я писал в комментариях, критическая ситуация здесь заключается в том, что в navigationOptions вы можете просто положиться на navigation prop для повторного рендеринга заголовка. Сначала я думаю о React Context API , но вы не можете получить доступ к контексту там.

  1. По сути, ваша DownloadedToday функция должна быть внутри React экрана которая является частью навигационной системы для того, чтобы изменить навигационную опору : прекрасной идеей может быть создать пользовательский хук для извлечения значения и использования его на текущем экране (Я могу показать вам это также, если вы спросите меня).

  2. включите ваш пользовательский хук в ваш экран и подпишитесь на его изменения: 

const { lastUpdate } = useYourCustomHook()
useEffect(() => {
  //
}, [lastUpdate])
теперь мы можем играть с параметрами навигации : идея состоит в том, чтобы отредактировать указанный параметр c, который будет отвечать за отключение кнопки, назовем его 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 param!

Измените 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 ?

С этим выражением вы скажем реагировать на навигацию, чтобы посмотреть параметры текущего активного экрана (routes - это массив маршрутов, проиндексированных по их текущему state.index), поэтому, если параметр отредактирован, ваш заголовок навигации теперь знает, что пора повторно -render!

...