我正在嘗試在課堂上使用反應導航。我通常在這樣的函式中使用它：
//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>
);
}
uj5u.com熱心網友回復：
使用類組件時，使用 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')}}
//...
)
}
}
希望這是有道理的。如果您有任何其他問題，請告訴我！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397934.html
上一篇：如何在反應中記住一個函式？