从选项卡屏幕导航到堆栈屏幕

Question

对于 IOS 应用程序，我有一个在选项卡导航器中调用的堆栈。我正在尝试从底部选项卡屏幕导航到堆栈中的屏幕，但出现以下错误。

undefined 不是一个对象（评估 '_this.props.navigation.navigate'）

我想在所有屏幕上渲染底部选项卡。我注意到这会在其他地方导致 goBack() 出现一些有趣的问题。

如何从底部选项卡屏幕导航到堆栈屏幕？

目前的实施是一种不好的做法吗？

我提供了这个演示以及下面的代码。我认为这与道具传递有关。

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

     <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {Screen1} 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.Navigator>
</NavigationContainer>
);
}

const Stack = createStackNavigator();

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ImageBackground,
} from 'react-native';
const Images = [
  { id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
  { id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
  { id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
  { id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
];

export default class Home extends React.Component {

thisNavigate = () => {
  this.props.navigation();
};

  renderList = (props) => {
    return Images.map((item, i) => {
      return (
          <TouchableOpacity
            onPress={() => this.props.thisNavigate.navigate('Screen2')}>
            <ImageBackground
              source={item.uri}
              style={{
                width: '100%',
                height: 100,
                shadowColor: '#000',
                shadowOffset: { width: 1, height: 4 },
                shadowOpacity: 1,
              }}
              imageStyle={{ borderRadius: 10 }}></ImageBackground>
          </TouchableOpacity>
      );
    });
  };

  render() {
    return <View style={{ flex: 1 }}>{this.renderList()}</View>;
  }
}

Answer 1

在您的示例中，您的 Home 组件是：

export default class Home extends React.Component {
  render() {
    return <Screen1/> // here navigation is not passed because it is rendered not by navigator but manually
  }
}

只需删除它，将其Stack.Screen从其中删除MyTabs并将initialRouteName设置为Screen1，它就会起作用。

编辑：

如果您想保持主页不变，请像这样传递导航：

export default class Home extends React.Component {
  render() {
    return <Screen1 navigation={this.props.navigation}/>
  }
}

或者使用useNavigation hook 而不是 props inScreen1来获取导航。

编辑2：

工作演示。