带有类组件的本机堆栈导航

Question

我目前正在构建一个本机应用程序，并且正在使用堆栈导航器在应用程序的屏幕之间导航。当前，在我的App.js中，屏幕以以下格式存储：

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="screen1">
          <Stack.Screen name="screen1" component={Screen1}></Stack.Screen>
          <Stack.Screen name="screen2" component={Screen2}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

用户进入屏幕1后，我希望能够通过按一下按钮导航到屏幕2。我通读了文档，仅看到了有关如何使用功能组件执行此操作的示例，例如：

function Screen1({ navigation }) {
  return (
    <View>
      <Button title="Go to Home" onPress={() => navigation.navigate('screen2')} />
    </View>
  );
}

但是我该如何使用类组件来做到这一点：

class Screen1 extends Component {

    render() {
        return(
            <View>
               // This does not work because I do not know how to pass in the navigation object
               <Button title="Go to Home" onPress={() => navigation.navigate('screen2')} />
            </View>
        )
    }
}

我在哪里传递{ navigation }？

Answer 1

您不必通过导航，它可以作为道具通过。

您可以按以下方式访问它

this.props.navigation.navigation('nextScreen')