gpt4 book ai didi

react-native - 如果没有 react-navigation 的导航 Prop 和 react-i18next 容器,我无法导航

转载 作者:行者123 更新时间:2023-12-02 04:25:39 24 4
gpt4 key购买 nike

我应用了 react-navigations 文档 (NavigationService) 中没有导航属性的导航示例,但我无法让它与 react- 一起工作i18next.

我应用了文档的例子https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html在我的代码中:

// App.js

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { createAppContainer } from 'react-navigation';
import { I18nextProvider, withNamespaces } from 'react-i18next';
import { persistor, store } from './src/store';
import I18n from './src/localization';
import Navigation from './src/navigation';
import NavigationService from './src/navigation/NavigationService';
import Loader from './src/screens/components/Loader';

class NavigationStack extends React.Component {
static router = Navigation.router;
render() {
const { t } = this.props;
return <Navigation screenProps={{ t, I18n }} {...this.props} />;
}
};

const ReloadNavOnLanguageChange = withNamespaces(['common', 'server'], {
bindI18n: 'languageChanged',
bindStore: false,
})(createAppContainer(NavigationStack));


export default class App extends React.Component {
...
render() {
return (
<Provider store={store}>
<PersistGate loading={<Loader />} persistor={persistor}>
<I18nextProvider i18n={ I18n } >
<ReloadNavOnLanguageChange ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}} />
</I18nextProvider>
</PersistGate>
</Provider>
);
};
};


// Navigation.js

...
export default Navigation = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Login: LoginScreen,
App: AppScreen
},
{
initialRouteName: 'AuthLoading'
}
);


// NavigationService.js

Apply the same code that's in https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html


// Any JS module of my project (actions, helpers, components, etc.)

import NavigationService from 'path-to-NavigationService.js';
...
NavigationService.navigate('Login');

当验证授权 token 且结果是否定的时,必须打开登录屏幕 (NavigationService.navigate('Login')) 但它返回错误 _navigator.dispatch is不是 NavigationService.js 中的函数:

const navigate = (routeName, params) => {
// DISPATCH ERROR
   _navigator.dispatch(
     NavigationActions.navigate({
       routeName,
       params
     })
   );
};

依赖关系:

  • react 16.5.0
  • native react 57.1
  • react-i18next 9.0.0
  • react 导航 3.1.2

有什么建议吗?还有其他人发现这种情况吗?

最佳答案

使用 react-i18next 的 withNamespaces hoc 的 innerRef 选项,而不是通过根组件的 ref 属性传递函数……正如 REACT-I18NETX 的文档所说!

// App.js

...
const ReloadNavOnLanguageChange = withNamespaces(['common', 'server'], {
bindI18n: 'languageChanged',
bindStore: false,
innerRef: (ref) => NavigationService.setTopLevelNavigator(ref)
})(createAppContainer(NavigationStack));

export default class App extends React.Component {
...
render() {
return (
...
<ReloadNavOnLanguageChange />
...
);
};
}

关于react-native - 如果没有 react-navigation 的导航 Prop 和 react-i18next 容器,我无法导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54726945/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com