Я получил предупреждение при попытке скрыть нижнюю навигацию на определенном экране. Предупреждение: «Невозможно обновить компонент из тела функции другого компонента» . Я пытаюсь сделать так, чтобы у меня был домашний экран, и когда я перехожу к подробному экрану, нижняя навигация исчезнет / будет скрыта. мой код, как показано ниже:

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

screensgot

Да это скрыто подробно экран, но почему есть предупреждение? где мне отредактировать или изменить свой код?

1
Muhammad Haekal 10 Ноя 2020 в 10:23

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])
1
Tobias 10 Ноя 2020 в 22:22