更改状态以及导航到另一个屏幕

Question

我有一个导航容器，可以调用堆栈中的函数。我想从堆栈屏幕导航到选项卡屏幕并更改该选项卡屏幕中的状态。我在下面给出了一些代码和演示。在演示中，您可以在 screen3（堆栈屏幕）上看到我正在尝试导航到 Home（选项卡屏幕）并更改状态，以便它呈现 MapHome 屏幕。

我不确定如何将状态传递到底部选项卡屏幕而不将其渲染到其他地方。我比你更欣赏任何见解。

这是我的演示以及 App.js 下面的一些代码。您必须在 IOS 或 Android 中运行该演示，它不适用于 Web。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import Home from './Home'
import ListHome from './screens/screen1'
import MapHome from './screens/screen2'
import Screen3 from './screens/screen3'

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {ListHome} options={{headerShown: false}}/> 
       <Stack.Screen name="Screen2" component= {MapHome} options={{headerShown: false}}/>
    </Stack.Navigator>
);
}


export default function App() {

  return (
   <NavigationContainer>
    <Tab.Navigator
    initialRouteName="Home"
    screenOptions={{
      tabBarActiveTintColor: '#F60081',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Home"
      component={MyTabs}
      options={{
        tabBarLabel: 'Home',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />

     <Tab.Screen
      name="Screen3"
      component={Screen3}
      options={{
        tabBarLabel: 'Screen3',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="account-group" color={color} size={size} />
        ),
      }}
    />
    
  </Tab.Navigator>
</NavigationContainer>
);
}

const Stack = createStackNavigator();

Answer 1

您可以将参数传递Screen3到Home屏幕。

我已经分叉了您的演示，并进行了一些小的重构（包括仅出于偏好从类组件更改为函数组件），因此您可能需要根据您的需求进行调整。你可以在这里找到它。

Screen3您可以将 onPress 逻辑修改为以下内容：

navigation.navigate('Home', {
  screen: 'Home',
    params: {
      componentToShow: 'Screen2'
    }
});

以下是您看到Home两次的原因的详细说明：

navigation.navigate('Home', {       // <-- Tab.Screen name. 
  screen: 'Home',                   // <-- Stack.Screen name.
    params: {
      componentToShow: 'Screen2'
    }
});

使用此代码，您现在可以将 a 传递route.param到主屏幕。我已经包含了一个useEffect可以随时运行route.params更改的程序。

const [whichComponentToShow, setComponentToShow] = React.useState("Screen1");

React.useEffect(() => {
  if(route.params && route.params.componentToShow) {
    setComponentToShow(route.params.componentToShow);
  }
}, [route.params]);

现在，每当用户导航到Home屏幕并componentToShow提供路线参数时，主屏幕都会更新。