使用 React Navigation (React Native) 从一个类导航到另一个屏幕答案

【问题标题】：Navigate from a class to another screen using React Navigation (React Native)使用 React Navigation (React Native) 从一个类导航到另一个屏幕
【发布时间】：2021-12-30 01:53:44
【问题描述】：

我正在尝试在课堂上使用反应导航。我通常在这样的函数中使用它：

//imports...
export default function Page1({navigation}) {
//...
onPress={()=>{navigation.navigate('Page2')}}
//...
}

onPress 在 TouchableOpacity 内部。现在我想像这样在课堂上使用它：

//imports...
export default class Page3 extends React.Component {
//...
onPress={()=>{navigation.navigate('Page4')}}
//...
}

我不知道如何将{navigation} 传递给 Page3 类。有没有办法做到这一点？这是我的 App.js

//...
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

import Page1 from './src/Page1';
import Page2 from './src/Page2';
import Page3 from './src/Page3';
import Page4 from './src/Page4';

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen component={Page1} name="Page1" options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen component={Page2} name="Page2" options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen component={Page3} name="Page3" options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen component={Page4} name="Page4" options={{headerShown:false}}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

【问题讨论】：

标签： reactjs react-native navigation react-navigation

【解决方案1】：

使用类组件时，使用this.props

//imports...
export default class Page3 extends React.Component {
//...
onPress={()=>{this.props.navigation.navigate('Page4')}}
//...
}

解释：

所以基本上在功能组件中，为了访问导航，您必须在函数顶部的参数上说 {navigation}。

//imports...
export default function Page1({navigation}) {
//...
onPress={()=>{navigation.navigate('Page2')}}
//...
}

您可以说props，而不是在参数上加上括号。 Props 基本上是将数据从一个组件发送到另一个组件。

//imports...
export default function Page1(props) {
const {navigation} = props; // aka const navigation = props.navigation. Both are same
//...
onPress={()=>{navigation.navigate('Page2')}}
//...
}

注意，你也可以说不用做变量（如果你有一个可以工作的功能组件，你可以试试这个）

onPress={()=> {props.navigation.navigate('Page2')}}

所以，在我们的例子中，它是一个类组件。类组件的特别之处在于 props 是自动“导入”到类中的，这意味着您可以使用 this 访问它。所以应该是this.props

就像你可以做的功能组件一样：

export default class Page3 extends React.Component {
//... functions

render(){

const {navigation} = this.props; // make sure you have in this render() but outside of return.

// that is also equalavent of saying const navigation = this.props.navigation


return (
   //...
   onPress={()=>{navigation.navigate('Page4')}}
   //...

)
  }
}

希望这是有道理的。如果您有任何其他问题，请告诉我！

【讨论】：

我需要通过{navigation}吗？我该怎么做？
不需要。只需这样做，它应该可以工作
谢谢，它正在工作。你介意解释一下这是如何工作的吗，我不明白。
见上文。我已经添加了解释
我明白了，非常感谢。

【解决方案2】：

对于类组件，需要用到

onPress={()=>{this.props.navigation.navigate('Page4')}}

使用您的示例我创建了零食，以便您了解所有内容
Snack Example 点击它并检查完美的解决方案。

对于 page1,page2,page4 我使用了函数组件和
对于 page3，我使用了类组件，
您将了解类和函数组件之间的区别。

【讨论】：

非常感谢