从函数调用导航 React native

Question

大家好，我无法找到问题的解决方案，因为我想导航到另一个页面，但问题就在这里

function NewOrderPopUp({id, services, name, rating, accepted, destinationPlaceName, userPlaceName, driverName, driverContactNumber, driverRating, driverTrackingNumber})
{
    async function toggleAcceptBooking()
    {
        await firestore()
        .collection('userBookingRequest')
        .doc(id)
        .update({
            accepted : !accepted,
            driverName: 'Sample Driver',
            driverContactNumber: '09123456789',
            driverRating: '4.9',
            driverPlateNumber: 'NFT-2020',
            driverTrackingNumber: GenerateTrackingNumber(),
        })
        CheckIfBookingAccepted();
    }
}

return (
        <View>....</View>
);

export default NewOrderPopUp;

我正在另一个文件中调用 NewOrderPopUp 页面。像这样

import NewOrderPopUp from "../../components/NewOrderPopUp";
const HomeScreen = () => {

//... codes here

return (
<View>
    <FlatList
         horizontal
         contentContainerStyle={{paddingHorizontal: 30}}
         data={userBookingData}
         keyExtractor={(item) => item.id} 
         renderItem={({item}) => <NewOrderPopUp {...item}/>} />                     
</View>
);
}
export default HomeScreen;

我想要的是，如果我单击 toggleAcceptBooking，它将导航到另一个页面，如

navigation.navigate('BookingPage');

谁能赐教一下。谢谢。

Answer 1

通过将 navigation 作为道具向下传递来完成。

执行以下步骤。

处理 HomeScreen

const HomeScreen = ({ navigation }) => {

}

将导航作为道具传递给 NewOrderPopUp

<FlatList
    ...
    renderItem={({item}) => <NewOrderPopUp navigation={navigation} {...item}/>} />

处理 NewOrderPopUp 中的导航道具并使用它进行导航。

function NewOrderPopUp( {navigation, ...} ){
    async function toggleAcceptBooking(){
        await ...
        navigation.navigate('BookingPage');
    }
}

从函数调用导航 React native

Navigate from a function call React native

react-native

react-navigation

react-hooks