firebase - 如何在没有错误提示的情况下调试 RN Expo 应用程序中的白屏页面(无内容显示)

Question

我一直在 React Native Expo 中构建应用程序。首先，我简单地通过将登录异步代码复制并粘贴到 Login.js 并将 this.login() 添加到 componentWillMount 来合并 Facebook 登录。这有效 - Facebook 登录弹出窗口显示为应用程序加载。我能够通过成功消息登录到我的 FB 帐户。

但是，一旦我尝试合并 Firebase，特别是在我的 Home.js 页面和 Login.js 页面之间传输代码的某个地方，我就开始在页面加载时出现这个白屏。

终端没有错误；除了 FacebookAppID 和 facebookDisplayName 不属于 app.json 的消息。

我尝试在 CSS 中添加不同的背景颜色(黑色)，这有效，但仍然没有内容。

从 app.json 中删除 FacebookAppID 和 facebookDisplayName，但什么也没做。

将我的 App Key 更新为正确的(我遗漏了最后一个数字)。

多次重新启动终端、expo web 终端 x code 和 metro builder。

更新了我的代码，以便我的 Screens 目录中的每个文件在底部都有 { connect } 和 { login } 导入以及 functionMapStateToProps 和 export 默认连接语句。

我尝试将 TabNavigator.js 中的选项卡更改为登录页面，并使用“登录”作为初始路由名称，但出现错误，提示 Login.js 不是 React 组件。

应该出现在任何其他页面之前的第一个页面是 Facebook 登录...所以看起来问题就在那里。

App.js

import React from 'react';
import Login from './screens/Login';
import reducers from './redux/reducers';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
const middleware = applyMiddleware(thunkMiddleware);
const store = createStore(reducers, middleware);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
     <Login/>
     </Provider>
    );
  }
}

------ App.js 结束------------

登录.js

import React from 'react';
import styles from '../styles'
import RootNavigator from '../navigation/RootNavigator';
import { connect } from 'react-redux';
import { login } from '../redux/actions';
import * as firebase from 'firebase';
import firebaseConfig from '../config/firebase.js';
firebase.initializeApp(firebaseConfig)

import { 
  Text, 
  View,
  TouchableOpacity
} from 'react-native';

class Login extends React.Component 
  state = {}

  componentWillMount() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user != null) {
        this.props.dispatch(login(true))
        console.log("We are authenticated now!" + JSON.stringify(user));
      }
    });
  }

  login = async () => {
    const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('YourAppKeyGoesHere', {
        permissions: ['public_profile'],
      });
    if (type === 'success') {
      // Build Firebase credential with the Facebook access token.
      const credential = await firebase.auth.FacebookAuthProvider.credential(token);

      // Sign in with credential from the Facebook user.
      firebase.auth().signInWithCredential(credential).catch((error) => {
        // Handle Errors here.
        Alert.alert("Try Again")
      });
    }
  } 

  render() {
    if(this.props.loggedIn){
      return (
        <RootNavigator/>
      )
    } else {
      return (
        <View style={styles.container}>
          <TouchableOpacity onPress={this.login.bind(this)}>
            <Text>{this.props.loggedIn}</Text>
          </TouchableOpacity>
        </View>
      )      
    }
  }
}

function mapStateToProps(state) {
  return {
    loggedIn: state.loggedIn
  };
}

export default connect(mapStateToProps)(Login);

--------Login.js结束------------

首页.js

import React from 'react';
import styles from '../styles';
import { connect } from 'react-redux';
import { login } from '../redux/actions';

import { 
  Text, 
  View,
  Alert
} from 'react-native';

class Home extends React.Component {
  state = {}

  componentWillMount() {

  }


  render() {
    return (
     <View>
      <Text>Home</Text>
     </View>
    )
  }
}

function mapStateToProps(state) {
  return {
    loggedIn: state.loggedIn
  };
}

export default connect(mapStateToProps)(Home);

-----Home.js 结束------

redux 文件夹

Action .js

export function login(){
    return function(dispatch){
        dispatch({ type: 'LOGIN', payload: input });
    }
}

----actions.js结束----

reducers.js

export default reducers = (state = {
    loggedIn: false,
}, action) => {
    switch (action.type) {
        case 'LOGIN': {
            return { ...state, loggedIn: action.payload  }
        }
    }
    return state;
}

------reducers.js 结束 -----------redux 文件夹结束 ------

-----导航文件夹( react 导航)---------根导航器.js---

import React from 'react';
import TabNavigator from './TabNavigator';

import {
    createDrawerNavigator,
    createStackNavigator,
    createBottomTabNavigator,
    createAppContainer,
} from 'react-navigation';

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

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

----RootNavigator.js 结束-----

----TabNavigator.js----

import React from 'react';
import Home from '../screens/Home';
import Profile from '../screens/Profile';
import Matches from '../screens/Matches';


import {
    createDrawerNavigator,
    createStackNavigator,
    createBottomTabNavigator,
    createAppContainer,
    createMaterialTopTabNavigator,
} from 'react-navigation';

export default createBottomTabNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Profile',
      },
    },
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      }
    },
    Matches: {
      screen: Matches,
      navigationOptions: {
        tabBarLabel: 'Matches',
      },
    },
  },
  {
    navigationOptions: {
      header: null
    },
    tabBarPosition: 'top',
    initialRouteName: 'Home',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
      style: {
        height: 75,
        backgroundColor: 'blue'
      },
    }
  }
);

-----TabNavigator结束----

Answer 1

你试过远程js调试吗？您可以做的是，远程调试 JS。 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

尝试 console.log("hi"); 当您的应用程序的第一个组件安装时。尝试在登录组件挂载时将其添加到登录页面。这将帮助您调试 js 调试器中列出的看不见的错误。只需检查这些错误并跟进即可!

一切顺利!