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

Question

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

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

我想在所有屏幕上呈现底部标签。我注意到这会导致 goBack() 以及其他地方出现一些有趣的问题。

如何从底部标签屏幕导航到堆栈屏幕？

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

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

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
  }
}

只需删除它，从MyTabs 中删除它的Stack.Screen 并将initialRouteName 设置为Screen1，它就可以工作了。

编辑：

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

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

或者使用useNavigation钩子代替Screen1中的道具来获得导航。

EDIT2：

工作demo。

Answer 2

我认为你需要用Navigation HOC 包装你的组件 https://reactnavigation.org/docs/4.x/with-navigation/

那是因为你的组件不是直接来自组件Navigator，所以他们没有this.props.navigation，为了让你的组件在Class Component中有导航道具，你需要使用withNavigation HOC包装你的组件

示例：

// Screen1.js
class Home extends React.Component {
  renderList = (props) => {
    return Images.map((item, i) => {
      return (
          <TouchableOpacity
            onPress={() => this.props.navigation.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>;
  }
}

export default withNavigation(Home);

抱歉，我认为 withNavigation 已从 v5 / v6 中删除

但你可以做一个这样的

import { useNavigation } from '@react-navigation/native';

// withNavigation.js
export default function withNavigation(WrappedComponent) {
   return (props) => {
      const navigation = useNavigation();
      return <Component navigation={navigation} {...props} />
   }
}