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

Question

我正在尝试在 class 中使用 React 导航。我通常在这样的函数中使用它：

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

onPress 在 TouchableOpacity 里面。现在我想像这样在 class 中使用它：

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

我不知道如何将 {navigation} 传递给 class 第 3 页。有没有办法做到这一点？这是我的 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>
  );
}

Answer 1

使用class个组件时，使用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')}}

所以，在我们的例子中，它是一个 class 组件。 class 组件的特别之处在于道具自动“导入”到 class 并且它是全局的，这意味着您可以使用 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')}}
   //...

)
  }
}

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

Answer 2

对于class组件，您需要使用

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

用你的例子我做点心让你明白一切
Snack Example点击查看完美解决方案

page1,page2,page4 我使用了函数组件并且
对于第 3 页，我使用了 class 组件，因此
您将了解 class 和功能组件之间的区别。

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

Navigate from a class to another screen using React Navigation (React Native)

navigation

reactjs

react-native

react-navigation