React Native Expo安卓独立版登录跳转Home页白屏问题求助

• 基于React Native Expo开发的独立应用，包含SignIn与Home组件
• 登录后跳转至Home页时会卡在白屏状态，但关闭应用重新打开后可正常进入Home页
• 开发环境下功能完全正常，仅在通过eas build -p android --profile preview构建的安卓独立版中出现该问题
• 使用logcat调试未发现报错信息

Preview构建配置 #

"preview": {
  "distribution": "internal",
  "android": {
    "buildType": "apk"
  },
  "channel": "preview"
},

Home组件代码 #

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Header from '../Header-Footer/Header';
import Footer from '../Header-Footer/Footer';
import { LinearGradient } from 'expo-linear-gradient';
import { useData } from '../DataContext';
import { Table, Row, Rows } from 'react-native-table-component';
import { Session } from '@supabase/supabase-js';
import { getUserRoles } from '../../supabase';

interface NavigationProps {
  session: Session | null; 
}
const Home:React.FC<NavigationProps> = ({session}) => {
  const { data } = useData(); 
  const { setData } = useData();
  useEffect(() => {
    if (session) {
      getRoles();
    }
  }, [session]);
  const getRoles = async ()=>{
    const roles = await getUserRoles();
    const hasRole = roles!.includes('daily-image-maker') || roles!.includes('system-admin');
    const dataValue = hasRole ? 'true' : null;
    setData(dataValue);
  }
  const tableHead = ["Tasks of Today"];
  const tableData = [
    ["You don't have messages today"],
  ];
  
  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['#004fec', '#000a20']}
        start={{ x: 0, y: 0 }} 
        end={{ x: 1, y: 0 }}
        style={styles.gradient}
      >
      <Header />
      <View style={[styles.mainContent]}>
         <Table style={{marginTop:40, width:"90%", borderColor: 'grey' ,}} >
            <Row
               data={tableHead}
               style={{ height: 40,borderRadius:30 , borderWidth:5 , borderBottomWidth:0,
                        borderBottomRightRadius:0, borderBottomLeftRadius:0,borderColor: 'grey',                        
                      }}
               textStyle= {styles.HeaderText}
               
            />
            <Rows 
                data={tableData} 
                style={{ height: 80, borderRadius:30 , borderWidth:5 ,
                         borderTopRightRadius:0, borderTopLeftRadius:0,borderColor: 'grey' }} 
                textStyle={styles.HeaderText}
            />
         </Table>
      </View>
        <Footer data={data}/>
      </LinearGradient>
    </View>
  );
};

const styles = StyleSheet.create({
  gradient: {
    flex: 1,
  },
  container: {
    backgroundColor:'#000080',
    flex: 1,
    flexDirection: 'column',
  },
  headerText:{
    fontSize:22,
    justifyContent:'flex-start',
    marginLeft:60,
    marginTop:10,
    color:'#0018f9',
  },
  mainContent: {
    height:'66%',
    alignItems: 'center',
    backgroundColor:'white',    
    borderTopLeftRadius:50,
    borderBottomRightRadius:50,
  },
  HeaderText:{ textAlign: "center", fontWeight: "bold" }
});

export default Home;

1. 异步操作异常未捕获 #

getRoles函数未做异常处理，若生产环境中getUserRoles请求失败或返回null，会导致组件挂起，无法完成渲染。

修复代码：

const getRoles = async ()=>{
  try {
    const roles = await getUserRoles();
    // 避免null/undefined调用includes，先做可选链判断
    const hasRole = roles?.includes('daily-image-maker') || roles?.includes('system-admin');
    const dataValue = hasRole ? 'true' : null;
    setData(dataValue);
  } catch (err) {
    console.error('获取角色失败:', err);
    // 兜底设置默认值，防止组件一直等待
    setData(null);
  }
}

2. 增加加载状态反馈 #

登录跳转后，异步操作可能存在延迟，用户看不到任何反馈误以为白屏。可以添加加载状态：

修复代码：

import { useState } from 'react';

const Home:React.FC<NavigationProps> = ({session}) => {
  const { data, setData } = useData(); 
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchRoles = async () => {
      if (session) {
        await getRoles();
      }
      setLoading(false);
    };
    fetchRoles();
  }, [session]);

  // 加载中显示占位内容
  if (loading) {
    return (
      <View style={styles.container} >
        <Text style={{color:'white', fontSize:18}}>加载中...</Text>
      </View>
    );
  }

  // 原渲染逻辑...
}

3. 排查LinearGradient兼容性 #

Expo Linear Gradient在生产构建中可能存在渲染冲突，先临时替换为纯色背景测试，确认是否是该组件导致的白屏：

// 替换LinearGradient为普通View
<View style={[styles.gradient, {backgroundColor:'#004fec'}]}>
  {/* 原内容 */}
</View>

如果恢复正常，重新安装依赖确保版本兼容：

npx expo install expo-linear-gradient

4. 调整样式布局 #

生产环境中百分比高度可能存在解析问题，把mainContent的height:'66%'改为flex布局：

mainContent: {
  flex: 2, // 配合Header和Footer的flex分配，比如Header设flex:0.5，Footer设flex:0.5
  alignItems: 'center',
  backgroundColor:'white',    
  borderTopLeftRadius:50,
  borderBottomRightRadius:50,
},

5. 调整EAS构建配置 #

尝试改用app-bundle构建，避免apk打包的潜在问题：

"preview": {
  "distribution": "internal",
  "android": {
    "buildType": "app-bundle"
  },
  "channel": "preview"
}

内容的提问来源于stack exchange，提问作者mustafa ibrahim