如何在RN Expo App中调试白屏页面（无内容显示）且无错误提示

Posted

技术标签:

【中文标题】如何在RN Expo App中调试白屏页面（无内容显示）且无错误提示【英文标题】：How to Debug White Screen Page (No Content Showing) in RN Expo App with No Error Prompts 【发布时间】：2019-07-11 09:49:16 【问题描述】：

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

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

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

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

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

将我的应用密钥更新为正确的（我错过了最后一个数字）。

多次重启终端、expo web终端x代码和metro builder。

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

我尝试将 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 结束 ----------

Home.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 文件夹

actions.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 文件夹结束------

-----导航文件夹（反应导航）----- ---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 结束----

【问题讨论】：

【参考方案1】：

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

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

你可以走了！

【讨论】：

谢谢阿克谢。我会试试这个。【参考方案2】：

正如另一个答案所暗示的那样，一旦您完成console.log 以查看组件实际正在加载，那么对我来说问题是我实际上无法看到内容。

我的解决方案是用&lt;View&gt; 包裹我的内容，以使内容在页面中间对齐。

我知道您的问题比这更复杂，但希望我的回答可能对其他人有所帮助。

<View
    style=
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-around',
    >
    <Text>Can you see this?</Text>
</View>

【讨论】：

【参考方案3】：

就我而言，

style =  borderColor : #fff

我的错误是在边界颜色值处除外...

修复更改

style =  borderColor : '#fff'

【讨论】：

【参考方案4】：

我也得到了飞溅徽标白屏，疲惫的可能解决方案没有任何效果，最后我删除了 node_module 和 yarn.lock。然后重新安装并更新博览会 跟随 cmd:-

$ npm 安装

$纱添加博览会

$ 展会更新

试试这个，对我有用。

！！享受吧！！

【讨论】：

以上是关于如何在RN Expo App中调试白屏页面（无内容显示）且无错误提示的主要内容，如果未能解决你的问题，请参考以下文章

ionic 调试 "死亡白屏"

React Native 首次加载白屏优化

Expo 入门宝典 一 （Quick Start）

在电脑上调试苹果ios上的h5页面

Expo大作战--expo如何使用Genymotion模拟器

RN-Android 封装原生安卓web组件 - H5白屏/卡顿/渲染问题