uselinking with callback ref

Question

我正在尝试使用react-navigation v5为我的应用实现深层链接。

我想将我的navigationContainer ref设置为react-native的useLinking钩子，同时将ref设置为我的顶级导航器：

const AppNavigationContainer: FC = () => {
    let navigatorRef;
    const [isReady, setIsReady] = useState<boolean>(false);
    const [initialState, setInitialState] = useState();
    const {getInitialState} = useLinking(navigatorRef, {
        prefixes: [prefix]
    });

    useEffect(() => {
        Promise.race([
            getInitialState(),
            new Promise(resolve => setTimeout(resolve, 150))
        ])
            .catch(console.log)
            .then(state => {
                if (state !== undefined) {
                    setInitialState(state);
                }
                setIsReady(true);
            });
    }, [getInitialState]);

    if (!isReady) {
        return null;
    }
    return (
        <NavigationContainer
            ref={(ref) => {
                NavigationService.setTopLevelNavigator(ref);
                navigatorRef = ref;
            }}
            initialState={initialState}
        >
            <StartupNavigator initialRouteName={Routes.CHECK}/>
        </NavigationContainer>
    );
}

但是在这里，我从useLinking挂钩中获得了undefined is not an object (evaluating 'ref.current')。

如何将我的参考设置为useLinking，同时将其设置为我的顶级导航器？

Answer 1

您可以设置参考的current属性：

const navigatorRef = React.useRef();

// ...

return (
    <NavigationContainer
        ref={(ref) => {
            NavigationService.setTopLevelNavigator(ref);
            navigatorRef.current = ref;
        }}
        initialState={initialState}
    >
        <StartupNavigator initialRouteName={Routes.CHECK}/>
    </NavigationContainer>
);