在 React Native 中隐藏底部选项卡导航时收到警告

Question

当我尝试在特定屏幕中隐藏底部导航时收到警告。 警告是“无法从不同组件的函数体内部更新组件” ，所以我想要做的是我有一个主屏幕，当我导航到详细信息屏幕时，底部导航将消失/隐。 我的代码如下：

ProductNavigation.js我的堆栈导航

import 'react-native-gesture-handler';
import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'
import MainScreen from '../screen/MainScreen'
import DetailScreen from '../screen/DetailScreen'

  const Stack = createStackNavigator();

  const ProductNavigation = ({navigation, route}) => {
    if (route.state) {
    navigation.setOptions({
        tabBarVisible: route.state.index > 0 ? false: true
      })
    }

    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={MainScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} options = {({ route }) => ({title: 
          route.params.productName })}/>
      </Stack.Navigator>
        )
      }

       export default ProductNavigation;

BottomTabNav.js我的底部导航

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'



  const BottomTab = createBottomTabNavigator();

  const BottomTabNav = ({ navigation, route }) => {

   return (
    <BottomTab.Navigator>
        <BottomTab.Screen 
        name="Home" 
        component={ProductNavigation} 
        options={{
            tabBarLabel: "Home",
            tabBarIcon:({color, size}) => (
                <Ionicons name="home-outline" color={color} size={size} />)
            }} />

        <BottomTab.Screen 
        name="Settings" 
        component={SettingScreen}
        options={{
            tabBarLabel: "Settings",
            tabBarIcon: ({color, size}) => (
                <Ionicons name="settings-outline" color={color} size={size} />)
            
        }} />
    </BottomTab.Navigator>
   )
  }

   export default BottomTabNav

是的，它隐藏在详细信息屏幕中，但为什么会出现警告？ 我应该在哪里编辑或更改我的代码？

Answer 1

查看navigation.setOptions ( https://reactnavigation.org/docs/navigation-prop/#setoptions ) 的文档，他们将逻辑放在useLayoutEffect挂钩中。

尝试改变：

import React from 'react'

...

  if (route.state) {
    navigation.setOptions({
      tabBarVisible: route.state.index > 0 ? false: true
    })
  }

到

import React, { useLayoutEffect } from 'react'

...

...

  useLayoutEffect(() => {
    if (route.state) {
      navigation.setOptions({
        tabBarVisible: route.state.index > 0 ? false: true
      })
    }
  }, [navigation, route])