我无法在 react-native 中使用 navigation.goBack() 返回上一个屏幕

Question

我有Profile选项卡及其子选项卡。从ChildA，我导航到ChildB，但当我试图返回到Profile时，它不起作用。我试过navigation.goBack(null)和useNavigation()钩子，但没有任何运气。这是我迄今为止的代码：

ChildA

const ChildA = ({navigation}) =>{
const onClick = (item) =>{
navigation.navigate("ChildB",{
photo:item.uri
})
}
return (
<View style={styles.container}>
<FlatList
data={images}
numColumns={2}
showsVerticalScrollIndicator={false}
style={styles.list}
contentContainerStyle={{ alignItems: 'center', }}
renderItem={({ item }) => (
<TouchableOpacity onPress={()=>onClick(item)}>
<Image
source={item}
style={styles.listItem}
keyExtractor={(item) => item.key}
/>
</TouchableOpacity>
)}
/>
</View>
)
}

ChildB

const ChildB = ({ navigation, route }) => {
console.log(route.name)
const {photo} = route.params
const DEVICE = Dimensions.get("screen")
return (
<View style={styles.container}>
<BackButton onPress={()=>navigation.goBack()} />
<Image source={{ uri: photo }} style={{ width: DEVICE.width, height: DEVICE.height / 2 }} />
<Text>This is the comments section</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'absolute'
}
})

应用程序.jsx

function Navigation(): JSX.Element {
return (
<Tab.Navigator
shifting={false}
activeColor="#315399"
// inactiveColor="#3e2465"
barStyle={{ backgroundColor: "white" }}>

<Tab.Screen
name="TabA" />
),
}}
component={TabA}
/>
<Tab.Screen
name="TabB" />;
},
}}
component={TabB}
/>
<Tab.Screen
name="Profile" />
),
}}
component={Profile}
/>

</Tab.Navigator>
);
}

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();

function App(): JSX.Element {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">

{/* Auth Navigator: Include Login and Signup */}
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Register"
component={Register}
options={{headerShown:false}}
/>
<Stack.Screen name="ChildB" 
component={ChildB} 
options={{headerShown:false}}/>
<Stack.Screen
name="ForgotPassword"
component={ForgotPassword}
options={{headerShown:false}}
/>

<Stack.Screen
name="Navigation"
component={Navigation}
// Hiding header for Navigation Drawer
options={{headerShown:false}}
// options={({ route }) => ({
//   headerTitle: getHeaderTitle(route),
// })}
/>

</Stack.Navigator>
</NavigationContainer>
);
}

如何从ChildB返回Profile？我是土生土长的新手，所以任何建议都将不胜感激！

Answer 1

我通过将导航作为道具而不是我使用的简单函数道具来传递，成功地使其工作起来。由于我使用的是自定义的后退按钮，道具功能并不是从屏幕到堆栈触发的，而是在屏幕之间触发的(例如，从注册返回到登录(。

前的后退按钮：

export default function BackButton({goBack}) {

return (
<TouchableOpacity onPress={goBack} style={styles.container}>
<FontAwesomeIcon icon={faArrowLeft}/>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 10 + getStatusBarHeight(),
left: 4,
zIndex:1
},
image: {
width: 24,
height: 24,
},
}) 

并在另一个组件中使用，方法是将道具导航传递给该组件，然后从BackButton:将navigation.goBack传递给goBack

const componentA = ({navigation})=>{
return(
<View>
<BackButton goBack={navigation.goBack}
</View>
)}

后退按钮工作：

export default function BackButton({navigation}) {

return (
<TouchableOpacity onPress={navigation.goBack} style={styles.container}>
<FontAwesomeIcon icon={faArrowLeft}/>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 10 + getStatusBarHeight(),
left: 4,
zIndex:1
},
image: {
width: 24,
height: 24,
},
})

和组件：

const componentA = ({navigation})=>{
return(
<View>
<BackButton navigation={navigation}
</View>
)}