有没有什么方法可以在 react-native 中将屏幕重新渲染到底部标签导航 v5

Question

嗨，我第一次使用 react-native 底部标签导航，当我返回到其他标签时遇到重新呈现屏幕的问题。我尝试在 useEffect() 中使用 isFocused 但它对我不起作用。

const LandScreen = ({navigation}) => {
  return (
    <Tab.Navigator
      
      tabBarOptions={{
        showLabel: false,
        activeTintColor: colors.primary,
        inactiveTintColor: colors.textHead,
      }}
      
      >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'home' : 'home';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Message"
        component={ChatStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'chatbox-ellipses' : 'chatbox-ellipses';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
      <Tab.Screen
        name="Requests"
        component={RequestStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'heart' : 'heart';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'notifications' : 'notifications';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreenScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'person' : 'person';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
    </Tab.Navigator>
  );
};

每个 Tab 组件内部都有一个堆栈。

有人告诉我如何重新呈现底部导航标签？

Answer 1

假设我理解你的问题，你想要做的就是在选项卡更改时重新呈现图标？

React Navigation 有此基于选项卡的导航用例的文档和示例 here。

在此处发布文档中的代码示例以便于访问：

import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

如果您的问题是在选项卡更改时重新呈现屏幕：

利用 useEffect 和 useIsFocused 应该在更改选项卡时起作用。您没有将您的示例包含在这些钩子中，所以我不确定您是如何使用它的。

下面的代码片段应该让你起来运行说钩子。在这种情况下，您可以运行在切换标签时 useEffect 内的任何内容，触发活动标签。

如果出于某种原因您只想 UI 根据选项卡更改之间的一些数据获得 updated/persisted 您可能需要考虑使用 Redux.

import React, { useEffect } from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useIsFocused } from "@react-navigation/core";

function HomeScreen() {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      console.log("HELLO HOME");
    }
  }, [isFocused]);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      console.log("HELLO SETTINGS");
    }
  }, [isFocused]);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 2

如果我没理解错的话，您希望在单击底部选项卡导航按钮时重新呈现屏幕。

这可以通过通过 React 导航文档添加 'focus' 事件侦听器来实现 https://reactnavigation.org/docs/function-after-focusing-screen/

或者在按下底部标签时显式调用 'navigation.navigate'。

有没有什么方法可以在 react-native 中将屏幕重新渲染到底部标签导航 v5

is there any method to re-render the screen to bottom tab nav v5 in react-native

reactjs

react-native

react-native-navigation