Извлечение константы из константы (доступность переменных)

Question

С помощью React Native и React Navigation я могу изменить свой заголовок на navigationOptions:

const ForumScreen = ({ navigation }) => {
  const forum = navigation.getParam('forum')

  ...
}

IndexScreen.navigationOptions = () => {
  return {
    title: 'My Forum',
  }
}

export default ForumScreen

Но я хочу использовать переменную forum компонента ForumScreen.

Я попробовал это, но получил ошибку, потому что переменная недоступна:

...
IndexScreen.navigationOptions = () => {
  return {
    title: forum.name,
  }
}
...

Answer 1

В вашем примере forum переменная определена в области действия функции ForumScreen и недоступна снаружи.

Вы можете попытаться поднять переменную, сохранив ее в родительском компоненте как ForumScreen, так и IndexScreen (например, в Магазин Redux или компонент React верхнего уровня)

class Parent {
  state = {
    forum: null
  }

  setForum(forum) {
    this.setState({ forum })
  }

  render() {
    return (
      <>
        <ForumScreen setForum={this.setForum} />
        <IndexForum forum={this.state.forum} />
      </>
   )
  }
}

const ForumScreen = ({ setForum, navigation }) => {
  const forum = navigation.getParam('forum')
  setForum(forum):
  ...
}

Теперь я понял, что navigationOptions - это метод stati c. Это не связано с IndexScreen this. Вы должны передать форум в качестве параметра, подобного приведенному ниже

IndexScreen.navigationOptions = (forum) => {
 return {
   title: forum.name,
 }
}

или сделать навигационные параметры не статичными c.

Еще один способ, но не способ React

let forum;
const ForumScreen = ({ navigation }) => {
  forum = navigation.getParam('forum');
}