React Native:如何在顶部栏上添加一个图标来制作popToTop

Question

我想在topBar中添加一个按钮，该按钮只在导航堆栈的两个屏幕中弹出ToTop。我试着这样做，但显然导航不起作用。

我的代码如下：

const Stack = createStackNavigator();
export default function App({navigation}) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name='MyMusic'
component={TabNavigator}
/>
<Stack.Screen
name='Search song'
component={SongScreen}
options={{
headerRight: () => (
<AntDesign
name='home'
color='white'
size={25}
style={{justifyContent: 'center', padding: 15}}
onPress={() => navigation.dispatch(StackActions.popToTop())}
/>
),
}}
/>
<Stack.Screen
name='Search artist'
component={ArtistScreen}
options={{
headerRight: () => (
<AntDesign
name='home'
color='white'
size={25}
style={{justifyContent: 'center', padding: 15}}
onPress={() => navigation.dispatch(StackActions.popToTop())}
/>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}

但在模拟器上尝试时，点击后会出现此错误：

TypeError: undefined is not an object (evaluating 'navigation.dispatch')

编辑：App.js的代码。我用评论"不工作"标记了感兴趣的行：

import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TabNavigator from './components/navigation/TabNavigator';
import SongScreen from './components/screens/SongScreen';
import ArtistScreen from './components/screens/ArtistScreen';
import AntDesign from 'react-native-vector-icons/AntDesign';

const Stack = createStackNavigator();
const colorStatusBar = Platform.OS === 'android' ? '#4527A0' : '#673AB7';
export default function App() {
const navigation = useNavigation();
return (
<NavigationContainer>
<StatusBar
backgroundColor={colorStatusBar}
/>
<Stack.Navigator>
<Stack.Screen
name='MyMusic'
component={TabNavigator}
options={{
title: 'MyMusic',
headerStyle: {
backgroundColor: '#673AB7',
},
headerTintColor: 'white',
}}
/>
<Stack.Screen
name='Search song'
component={SongScreen}
options={{
title: 'Song Video & Lyrics',
headerStyle: {
backgroundColor: '#673AB7',
},
headerTintColor: 'white',
headerRight: () => ( 
<AntDesign
name='home'
color='white'
size={25}
style={{ justifyContent: 'center', padding: 15 }}
onPress={() => navigation.popToTop()} //<---not work
/>
),
}}
/>
<Stack.Screen
name='Search artist'
component={ArtistScreen}
options={{
title: 'Artist Details',
headerStyle: {
backgroundColor: '#673AB7',
},
headerTintColor: 'white',
headerRight: () => ( 
<AntDesign
name='home'
color='white'
size={25}
style={{ justifyContent: 'center', padding: 15 }}
onPress={() => navigation.popToTop()} //<---not work
/>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}

Answer 1

由于您试图访问App.js中的导航道具，它显示为未定义。

您必须使用useNavigation挂钩。

在您的终端npm install @react-navigation/native

一旦你安装了软件包，然后像一样调整你的App.js

import { useNavigation } from '@react-navigation/native';
export default function App() {
const navigation = useNavigation();
//here is the rest of your code
}

这是的官方文件

在上述方法不起作用的情况下的替代方法

使用navigationOptions直接在屏幕中而不是在App.js中添加标题。以下是如何在SongScreen中进行操作，例如

//All IMPORT statements goes here
const SongScreen = ({ navigation }) => {
//All your SongScreen CODE goes here 
};
SongScreen.navigationOptions = ({ navigation }) => {
return {
headerRight: () => {
return (
<AntDesign
name='home'
color='white'
size={25}
style={{ justifyContent: 'center', padding: 15 }}
onPress={() => navigation.popToTop()}
/>
); 
},
};
};
const styles = StyleSheet.create({
//All your SongScreen STYLES goes here 
});
export default SongScreen;