react-navigation & expo 升级后反应原生项目的问题

Question

升级我的 react-native 应用程序后，我遇到了以下问题。

我的 package.json 如下所示

{
  "name": "react-native-expo-app",
  "version": "0.0.0",
  "description": "Hello Expo!",
  "author": null,
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "dependencies": {
    "expo": "^25.0.0",
    "firebase": "^4.9.1",
    "lodash": "^4.17.4",
    "moment": "^2.19.2",
    "native-base": "^2.3.2",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-chooser": "^1.6.2",
    "react-native-datepicker": "^1.6.0",
    "react-native-dropdown": "0.0.6",
    "react-native-elements": "^0.16.0",
    "react-native-ui-kitten": "^3.0.0",
    "react-navigation": "^1.0.0",
    "react-navigation-redux-helpers": "^1.0.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-persist": "^4.10.2",
    "redux-thunk": "^2.2.0"
  }
}

该应用程序似乎在加载第一个页面时正在处理后续页面，因为错误消息抱怨 HomePage，但它应该只呈现 WelcomePage。请在下面查看我的 App.js 代码。

const config = {
    key: 'primary',
    storage: AsyncStorage
};

const HomeNavigator = TabNavigator({
    home: {screen: HomePage},
    popular: {screen: PopularPage},
    search: {screen: SearchPage},
    notifications: {screen: NotificationsPage}
}, {
    ...TabNavigator.Presets.iOSBottomTabs,
    });

const RootNavigator = TabNavigator({
    welcome: {screen: WelcomePage},
    auth: {screen: AuthPage},
    signUp: {screen: SignUpPage},
    resetPassword: {screen: ResetPasswordPage},
    main: {
        screen: DrawerNavigator({
                home: {
                    screen: HomeNavigator,
                },
                profile: {
                    screen: ProfilePage,
                },
                following: {
                    screen: FollowingPage,
                },
                bookmarks: {
                    screen: BookmarksPage,
                },
                contact: {
                    screen: ContactPage,
                },
                info: {
                    screen: InfoPage,
                },
                conduct: {
                    screen: ConductPage,
                },
                login: {
                    screen: LoginPage,
                },
                groupProfile: {
                    screen: GroupProfilePage
                }
            },
            {
                contentComponent: SideMenuPage,
                drawerWidth: 250
            }
        )
    }
}, {
    tabBarPosition: 'bottom',
    backBehavior: 'none',
    navigationOptions: {
        tabBarVisible: false
    },
    lazy: true
});

const initialState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams('welcome'));

const navReducer = (state = initialState, action) => {
    const nextState = RootNavigator.router.getStateForAction(action, state);
    return nextState || state;
};

const appReducer = combineReducers({
        nav: navReducer,
        auth,
        signUp,
        resetPasswordReducer,
        home,
        popular,
        rules,
        conduct,
        profile
    }
);

const middleware = createReactNavigationReduxMiddleware(
    "welcome",
    state => state.nav,
);
const addListener = createReduxBoundAddListener("welcome");

class AppSupport extends React.Component {
    render() {
        return (
            <RootNavigator navigation={addNavigationHelpers({
                // dispatch: this.props.dispatch,
                state: this.props.nav,
                addListener,
            })} />
        );
    }
}

const mapStateToProps = (state) => ({
    nav: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(AppSupport);

const store = createStore(
    appReducer,
    applyMiddleware(ReduxThunk),
);

export default class App extends React.Component {

    state = {isReady: false};

    async componentWillMount() {
        const config = {
            apiKey: “hidden”,
            authDomain: "hidden",
            databaseURL: "hidden",
            projectId: "hidden",
            storageBucket: "hidden",
            messagingSenderId: "hidden"
        };
        firebase.initializeApp(config);

        this.setState({isReady: true});
    }

    render() {

        if (this.state.isReady) {
            return (
                <Provider store={store}>
                    <AppWithNavigationState />
                </Provider>
            );
        } else {
            return <Expo.AppLoading/>
        }
    }
}

见

Answer 1

错误消息表明HomePage.jsx 的第 17 行没有当前用户，您正在尝试使用currentUser.displayName。

很可能（您没有分享相关代码）您可以直接查找当前用户，例如：

firebase.auth().currentUser.displayName

您需要将其包装在身份验证状态侦听器中：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in, get its display name.
  }
});

这样，代码仅在实际存在当前用户时运行。另请参阅 Firebase 文档中的 getting the current user。