Как я могу использовать метод конструктора с реагировать навигации v3?

Question

Мне нужно использовать состояние в моем коде App.js, но response-navigation v3 не использует класс, поэтому я не могу определить метод конструктора.Есть ли другой способ, чтобы я мог использовать состояние?

Я пытался использовать логическую переменную javascript, но это не помогло.

Я использую StackNavigator, навигатор ящиков и DrawerNavigator и BottomTabNavigator, как это

const TabAppNavigator = createBottomTabNavigator({
  Posts: {
    screen: PostsScreen,
    navigationOptions: {
      tabBarLabel: 'Posts',
      tabBarIcon: ({ tintColor }) => (<Icon name="md-home" color={tintColor} size={25} />)
    }
  },
  Tools: {
    screen: ToolsScreen,
    navigationOptions: {
      tabBarLabel: 'Tools',
      tabBarIcon: ({ tintColor }) => (<Icon name="md-apps" color={tintColor} size={25} />)
    }
  },
  Favourite: {
    screen: FavouriteScreen,
    navigationOptions: {
      tabBarLabel: 'Favourite',
      tabBarIcon: ({ tintColor }) => (<Icon name="md-heart" color={tintColor} size={25} />)
    }
  },
}, {
    initialRouteName: 'Posts',
    order: ['Posts', 'Tools', 'Favourite'],
    tabBarOptions: {
      activeTintColor: '#d94854',
      inactiveTintColor: '#818181',
      style: {
        backgroundColor: '#fff',
        borderTopColor: '#818181',
        borderTopWidth: 1,
        paddingBottom: 5,
        paddingTop: 15,
      },
      labelStyle: {
        fontSize: 13,
        marginTop: 10,
      },
    },
    navigationOptions: ({ navigation }) => {
        return {
          headerTitle: 'Growth Hack Toolkit',
          headerTintColor: '#fff',
          headerStyle: {
            backgroundColor: '#d94854',
          },
          headerLeft: (
            <Icon name="md-menu" color="#fff" size={25} style={{ paddingLeft: 15 }} onPress={() => navigation.openDrawer()} />
          ),
          headerRight: (
            <Icon name="md-search" color="#fff" size={25} style={{ paddingRight: 15 }} onPress={() => search()} />
          )
        }
    }
  }
)

const PostsStackAppNavigator = createStackNavigator({
  TabAppNavigator: TabAppNavigator,
  Posts: { screen: PostsScreen },
  Post: { screen: PostScreen }
})

const ToolsStackAppNavigator = createStackNavigator({
  TabAppNavigator: TabAppNavigator,
  Tools: { screen: ToolsScreen },
  Tool: { screen: ToolScreen },
  ToolList: { screen: ToolListScreen },
  Web: { screen: WebScreen },
  Mobile: { screen: MobileScreen },
})

const DrawerAppNavigator = createDrawerNavigator({
  Posts: { screen: PostsStackAppNavigator },
  Tools: { screen: ToolsStackAppNavigator },
  About: { screen: AboutScreen },
}, {
    contentComponent: SideMenu,
    drawerWidth: 250,
  })

const App = createAppContainer(DrawerAppNavigator);
export default App;

Я хочу изменить свой заголовок в зависимости от моего состояния

В основном у меня есть заголовок по умолчанию (тот же заголовок для всех экранов вкладок), который содержит заголовок, значок меню начтобы начать поиск, откройте окно навигации и значок поиска. Что нужно сделать, так это то, что при нажатии значка поиска я меняю свое состояние, отображая вместо заголовка, а при нажатии значка закрытия я меняю состояние, чтобы отображать заголовок по умолчанию.еще раз.

Answer 1

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

Невозможно иметь состояние в функциональном компоненте. Поэтому я должен использовать реагирующую навигацию v2 вместо v3, поскольку она реализована как компонент на основе классов.

Эти ссылки могут помочь понять:

разница между функциональными и основанными на классе компонентами React

Состояние реакции без конструктора