react-native - (0, _reactI18next.translate) 不是函数

Question

实际上，我是 native react 的新手，在这里我尝试使用“react-i18next”将语言更改为阿拉伯语，但是在执行时出现以下错误

ReactNativeJS ▶︎ (0, _reactI18next.translate) is not a function. (In '(0, _reactI18next.translate)('common', { bindI18n: 'languageChanged', bindStore: false })', '(0, _reactI18next.translate)' is undefined)

这是我的代码

import React from 'react';
import AppNavigator from './src/controller/AppNavigator';
import { translate } from 'react-i18next';
// import i18n from './src/I18n/index';
console.reportErrorsAsExceptions = false;

const WrappedStack = ({ t }) => {
  return <AppNavigator screenProps={{ t }} />;
};
const ReloadAppOnLanguageChange = translate('common', {
  bindI18n: 'languageChanged',
  bindStore: false,
})(WrappedStack);

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

AppNavigator.js

import {
    createStackNavigator,
    createAppContainer,
} from 'react-navigation';
import SScreen from '../view/sScreen/SScreen';
import Login from '../view/login/Login';
import SignUp from '../view/signUp/SignUp';
import TabNavigation from '../controller/TabNavigation';
import ForgotPassword from '../view/forgotPassword/ForgotPassword';
import AddAppointment from '../view/addAppointment/AddAppointment';
import DrProfile from '../view/drProfile/DrProfile';
import PaymentHistory from '../view/paymentHistory/PaymentHistory';


const AppNavigator = createStackNavigator({
    SScreen: {
        screen: SScreen,
        navigationOptions: {
            header: null
        }
    },
    Login: {
        screen: Login,
        navigationOptions: {
            header: null
        }
    },
    SignUp: {
        screen: SignUp,
        navigationOptions: {
            header: null
        }
    },
    ForgotPassword: {
        screen: ForgotPassword,
        navigationOptions: {
            header: null
        }
    },
    TabNavigation: {
        screen: TabNavigation,
        navigationOptions: {
            header: null,
            title: "TabNavigation",
            headerStyle: {
                backgroundColor: '#B78FC3',
            },
            headerTintColor: 'white',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
            },
            headerLeft: null
        },
    },
    AddAppointment: {
        screen: AddAppointment,
        navigationOptions: {
            title: "Add An Appointment",
            headerStyle: {
                backgroundColor: '#B78FC3',
            },
            headerTintColor: 'white',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
            },
        },
    },
    DrProfile: {
        screen: DrProfile,
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#B78FC3',
            },
            headerTintColor: 'white',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
            },
        },
    },
    PaymentHistory: {
        screen: PaymentHistory,
        navigationOptions: {
            title: "Payment History",
            headerStyle: {
                backgroundColor: '#B78FC3',
            },
            headerTintColor: 'white',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
            },
        },
    },
},
    { headerLayoutPreset: 'center' });


const App = createAppContainer(AppNavigator);
export default App; 

Answer 1

使用 withTranslation()而不是 translate()高阶
迁移文档中似乎缺少这个。