[英]How to `navigate` to new screen from button in header with react-navigation?
我正在使用react-navigation
並希望在我的標題右側添加一個按鈕,該按鈕將導航到不同的屏幕。 但是在設置navigationOptions
,我想知道如何在按下按鈕時調用的回調中訪問navigate
功能:
const RootNavigationStack = StackNavigator({
PokemonList: {
screen: PokemonListWrapper,
navigationOptions: {
title: ({state}) => `Pokedex`,
header: ({ state, setParams }) => {
return {
visible: true,
right: (
<Button
title={'Add'}
onPress={() => // navigate to new screen here
/>
),
}
}
},
},
, {
headerMode: 'screen'
})
任何想法如何實現? 我正在考慮使用withNavigation
,但我仍然不太清楚它是如何工作的。
另一個答案適用於舊版本的 react Navigation。
對於新版本,試試這個:
static navigationOptions = ({ navigation }) => ({
headerRight: (
<Button
title='Setting'
onPress={ () => navigation.navigate('RouteName') }
backgroundColor= "rgba(0,0,0,0)"
color="rgba(0,122,255,1)"
/>
)});
我使用這個解決了同樣的問題(在 Screen/Component Class 中)
static navigationOptions = ({navigation}) => {
return {
title: 'Next',
headerRight: <Button
title="Next"
onPress={ () => navigation.navigate('RegPasswordScreen')} />
};
};
嘗試這個。
header: ({ navigate }) => ({
right: (
<Button onPress={() => navigate('screen2')} />
)
}),
在最新版本中,你可以通過鈎子來做到這一點。
import { useNavigation } from '@react-navigation/native';
const CustomHeaderComponent = (props) => {
const navigation = useNavigation();
return <Button onPress={() => navigation.navigate('screen2')} />;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.