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])

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

1 个答案: