如何在 RN Expo 应用程序中调试白屏页面（无内容显示）且没有错误提示

Question

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

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

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

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

从 app.json 中删除 FacebookAppID 和 facebookDisplayName，这没有任何作用。

将我的应用程序密钥更新为正确的密钥（我缺少最后一个数字）。

多次重新启动终端、expo web 终端 x 代码和地铁构建器。

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

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

在其他页面之前应该显示的第一个页面是 Facebook 登录页面……所以问题似乎就在那里。

应用程序.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 结束 ------

还原文件夹

动作.js

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

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

减速器.js

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

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

-----导航文件夹（反应导航）-------- ---RootNavigator.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 调试器中列出的看不见的错误。只需检查这些错误并跟进即可！

你可以走了！