我想在堆疊標題（右側）上添加一個按鈕（圖示）。單擊它會轉到該頁面，但它不起作用。似乎“未定義不是物件（評估 'navigation.navigate'）”。
下面是我的代碼：
<Stack.Navigator>
<Stack.Screen name="Page1" component={Page1} />
<Stack.Screen
name="Page2"
component={Page2}
options={{
headerRight: () => (
<View>
<TouchableOpacity
onPress={() => navigation.navigate('Page3')}>
<Image source={require('../assets/image.png')} />
</TouchableOpacity>
</View>
)
}}
/>
<Stack.Screen name="Page4" component={Page4} />
<Stack.Screen name="Page5" component={Page5} />
</Stack.Navigator>
uj5u.com熱心網友回復：
Navigation僅在螢屏的組件中定義。在您的情況下，您可以嘗試使用useNavigation鉤子導航到不同的螢屏。像這樣匯入：
import { useNavigation } from '@react-navigation/native';
并宣告如下：
const navigation = useNavigation();
然后你把它給你的TouchableOpacity道具就好了onPress={() => navigation.navigate('Page3')}。
希望這對你有用。謝謝
uj5u.com熱心網友回復：
您可以將導航從選項傳遞到 headerRight：
options={({navigation}) => ({
headerRight: () => (
...
),
})}
或使用導航（）：
const navigation = useNavigation();
編輯2：
修復了您的零食代碼及其作業正常：您必須添加一個名為“MyorderStack”的 stackScreen，因為您正試圖導航到該頁面。
<NavigationContainer independent={true}>
<Stack.Navigator screenOptions={{ headerTintColor: 'blue' }}>
<Stack.Screen name="Global Page" component={AppNavigator} options={{ headerShown: false }} />
<Stack.Screen name="DetailOne" component={DetailOne} options={({navigation}) => ({ headerBackTitleVisible: false, title: 'Global Page',
headerRight: () => (
<View style={{flexDirection: 'row',justifyContent: 'flex-end',width: '50%'}}>
<View style={{ marginRight: 10 }}>
<TouchableOpacity onPress={() => navigation.navigate('MyorderStack')}>
<Image source={require('./assets/shop.png')} style={styles.Image} />
</TouchableOpacity>
</View>
</View>
), headerTitleAlign:'center', headerTintColor:colors.primary
})}
/>
<Stack.Screen name="DetailTwo" component={DetailTwo} options={{headerBackTitleVisible: false, headerTitleAlign: 'center', title: 'Global Page', headerTintColor: colors.primary}} />
<Stack.Screen name="MyorderStack" component={MyorderStack} options={{headerBackTitleVisible: false, headerTitleAlign: 'center', title: 'Global Page', headerTintColor: colors.primary}} />
</Stack.Navigator>
</NavigationContainer>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/315562.html
上一篇：我正在使用來自react-native的Image.getSize它在android上運行良好，但在uri是空字串時在ios中不起作用