Question

我在 app.js 中有一个主导航器

import React from 'react';
import LoginScreen from './src/screens/LoginScreen';
import HomeScreen from './src/screens/HomeScreen';
import { Image } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Constans } from './src/constants/Constant';
import SignupScreen from './src/screens/SignupScreen';
import { EventScreen } from './src/screens/EventScreen';

const navigator = createStackNavigator(
  {
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        headerShown: false
      }
    },
    SignUp: {
      screen: SignupScreen,
      navigationOptions: {
        headerShown: false
      }
    },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        headerLeft:()=>false,
        headerTitle:()=> (
          <Image style={{width:35,height:35}} source={Constans.logoImage}/>
        )
      }
    },
    Event:{
      screen:EventScreen,
      navigationOptions: {
        headerLeft:()=>false,
        headerTitle:()=> (
          <Image style={{width:35,height:35}} source={Constans.logoImage}/>
        )
      }
    }
  },
  
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(navigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

当我进入 HomeScreen 时，我也有菜单导航器。

import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { TabEventsScreen } from './TabEventsScreen';
import { TabForYouScreen } from './TabForYouScreen';
import { TabProfileScreen } from './TabProfileScreen';

const Tab = createBottomTabNavigator();
export default function HomeScreen() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions=
                {
                    ({ route }) => 
                    (
                        {
                            tabBarIcon: ({ focused, color }) => 
                            {
                                return  <Icon 
                                            name={route.name === 'Explore' ? "globe" : route.name === 'Profile' ? 'user' : route.name === 'Wallet' ? 'money' :'star'} 
                                            size={focused ? 32: 24} 
                                            color={color} />;
                            }
                        }
                    )
                }
                tabBarOptions=
                {
                    {
                        activeTintColor: '#1F7A8C',
                        inactiveTintColor: 'gray',
                    }
                }>
                <Tab.Screen name="Explore" component={TabEventsScreen} />
                <Tab.Screen name="For You" component={TabForYouScreen} />
                <Tab.Screen name="Wallet" component={TabProfileScreen} />
                <Tab.Screen name="Profile" component={TabProfileScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

在一个选项卡屏幕中，我试图导航主导航器的事件屏幕。我该怎么做？

import React, { useState, useEffect } from 'react';
import { Constans } from './../constants/Constant';
import { View, ImageBackground, Text, ScrollView } from 'react-native';
import { TabEventsScreenStyle } from './../styles/TabEventsScreenStyle';
import { IncomingEvents } from './../services/TabEventsService';
import { EventCard } from './../components/Eventcard'
export function TabEventsScreen({navigation}) {
    const [events, setEvents] = useState([]);
    const [page, setPage] = useState(1);
    _getEvents = () => {
        return IncomingEvents(1, page, 20);
    }
    useEffect(() => {
        setEvents(_getEvents().Events);
    });
    _OnButtonPress=(key)=>{
        console.log(navigation)
        navigation.navigate('Event',{itemId:key});   
    }
    return (
        <ScrollView>
            <ImageBackground source={Constans.homeBackGroundImage} style={TabEventsScreenStyle.backgroundImage} >

                <Text style={TabEventsScreenStyle.title}>Incoming Events</Text>
                <View>
                    {
                        events.map(el =>
                            <Text style={TabEventsScreenStyle.text} onPress={()=> this._OnButtonPress(el.key)}>
                                <EventCard   key={el.key} data={el}></EventCard>
                            </Text>
                        )
                    }
                </View>

            </ImageBackground>
        </ScrollView>
    );
}

我的错误是

<块引用>

带有有效载荷的“导航”操作 {"name":"Event","params":{"itemId":1}} 没有被任何人处理导航器。

您有名为“事件”的屏幕吗？

如果您尝试导航到嵌套导航器中的屏幕，请参阅 https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。

我也试过

const parent_nav=navigation.dangerouslyGetParent();
        console.log(navigation);
        parent_nav.navigate('Event',{itemId:key});

但 parent_nav 未定义

提前致谢

Answer 1

您可以像所有屏幕都在同一级别一样导航。

<块引用>

导航操作由当前导航器处理，如果无法处理则冒泡

例如，如果您在嵌套屏幕中调用 navigation.goBack()，则只有当您已经在导航器的第一个屏幕上时，它才会返回父导航器。导航等其他操作类似，即导航将发生在嵌套导航器中，如果嵌套导航器无法处理它，则父导航器将尝试处理它。在上面的例子中，当调用navigate('Messages')时，在Feed屏幕内部，嵌套的标签导航器会处理它，但如果你调用navigate('Settings')，父堆栈导航器会处理它。

source。

当您导航时，它会尝试在当前导航中找到您的屏幕，如果失败，则将尝试使用父导航直到根导航。

Answer 2

使用 NavigationContainer 而不是 TabNavigator 包裹您的 AppContainer，以便 StackNavigator 和 TabNavigator 使用相同的导航道具

export default class App extends React.Component {
   render() {
      return(
         <NavigationContainer>
              <AppContainer />
         <NavigationContainer/>
      )}
   }

并从 TabNavigator 中移除 NavigationContainer

这是我嵌套堆栈和选项卡导航器的方式

import React from 'react';
import {Dimensions, StatusBar, StyleSheet} from 'react-native';

import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import AScreen from './AScreen';
import BScreen from './BScreen';
import CScreen from './CScreen';
import DScreen from './DScreen';
import A from './a';
import B from './B';
import C from './C';
import D from './D';

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();

const BottomTab = () => {
  return (
    <Tab.Navigator
      activeColor="#ff6362"
      backBehavior="initialRoute"
      barStyle={{backgroundColor: '#000000'}}>
      <Tab.Screen
        name="A"
        component={AScreen}
        options={{
          tabBarLabel: 'A',
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons name="book-open" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="B"
        component={BScreen}
        options={{
          tabBarLabel: 'B',
          tabBarIcon: ({color}) => (
            <MaterialIcons name="people" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="C"
        component={CScreen}
        options={{
          tabBarLabel: 'C',
          tabBarIcon: ({color}) => (
            <MaterialIcons name="people" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="D"
        component={DScreen}
        options={{
          tabBarLabel: 'D',
          tabBarIcon: ({color}) => (
            <MaterialIcons name="person-pin" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default function AdminScreen(props) {
  return (
      <NavigationContainer>
        <StatusBar hidden />
        <Stack.Navigator headerMode="none">
          <Stack.Screen name="BottomTab" component={BottomTab} />
          <Stack.Screen name="A" component={A} />
          <Stack.Screen name="B" component={B} />
          <Stack.Screen name="C" component={C} />
          <Stack.Screen name="D" component={D} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

在子导航器屏幕内反应本机调用导航器

2 个答案: