Question

我需要在App.js代码上使用状态，但是react-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

花了很多时间寻找解决方案或解决方法后，答案是：我不能。

不可能在功能组件中具有状态。因此，我必须使用React Navigation v2而不是v3，因为它已实现为基于类的组件。

这些链接可以帮助您了解：

difference between functional and class-based React components

React State without Constructor

如何在React Navigation v3中使用构造函数方法？

1 个答案: