React Native+Expo联想平板刷新后组件尺寸异常求助

数据老陈

2026-6-26

Expo React Native 平板组件渲染异常问题排查与解决

问题描述

使用Expo开发React Native应用时，在联想平板设备上遇到组件渲染异常：应用刷新后部分组件尺寸出现异常变化；临时修改受影响组件的任意样式值可暂时修复问题，但下次刷新时问题会再次复发；还原样式不会立即触发问题，仅在重新加载应用时出现。该问题最初出现在Modal组件，后续扩散到应用其他区域，怀疑是App.js结构或React Native/Expo在该设备上的特性导致。已尝试引入Paper Provider、锁定横屏、排查样式逻辑等方案，问题仍未解决。

相关代码片段

App.js

import { StatusBar } from 'expo-status-bar';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { useEffect, useState } from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { PaperProvider } from 'react-native-paper';
import * as ScreenOrientation from 'expo-screen-orientation'
import ReadingCatalogue from './Components/Screens/Stacks/ReadingCatalogue';

import Home from './Components/Screens/BottomTabs/Home';
import ExampleScreen from './Components/Screens/Stacks/ExampleScreen';
import SomethingElse from './Components/Screens/BottomTabs/SomethingElse';
import CameraScreen from './Components/Displays/CameraScreen';

const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

const getTabBarVisibility = (route) => {
  const routeName = getFocusedRouteNameFromRoute(route) ?? '';
  console.log("Current route name:", routeName);

  return !['CameraScreen'].includes(routeName);
}

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeTab" component={TabNavigator} />
      <Stack.Screen options={{ headerShown: false}} name="CameraScreen" component={CameraScreen} />
      <Stack.Screen name="ExampleScreen" component={ExampleScreen} />
      <Stack.Screen options={{headerShown: false}} name="ReadingCatalogue" component={ReadingCatalogue} />
    </Stack.Navigator>
  );
}

function TabNavigator() {
  return (
    <Tab.Navigator
    screenOptions={({route}) => ({
      headerStyle: {
        backgroundColor: 'blue',
        height : "6%",
      },
      tabBarStyle : {
        display: getTabBarVisibility(route) ? "none" : "flex",
      }  
    })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="SomethingElse" component={SomethingElse} />
    </Tab.Navigator>
  );
};

export default function App() {
  const [orienation, setOrientation] = useState(1);

  useEffect(() => {
    LockOrientation();
  }, []);

  const LockOrientation = async () => {
    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
    const o = await ScreenOrientation.getOrientationAsync();
    setOrientation(o);
  };

  return (
    <PaperProvider>
    <NavigationContainer>
     <StackNavigator />
      <StatusBar style="auto" />
    </NavigationContainer>
    </PaperProvider>
  );
}
AppRegistry.registerComponent('App', () => App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ReadingCatalogue.js

import { StyleSheet, Text, View, SafeAreaView } from 'react-native'
import React from 'react'
import ReadingCarousel from '../../Displays/ExtractCarousel/ReadingCarousel'

const ReadingCatalogue = () => {
  return (
    <View style={styles.container}>
        <Text style={styles.pageHeader}>What Would You Like To Read?</Text>
      <ReadingCarousel/>
    </View>
  )
}

export default ReadingCatalogue

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
  },

  pageHeader:{
    fontSize: 60,
    fontWeight: 'bold',
    textAlign: 'left',
    padding: 30,
  }
})

ReadingCarouselItem.js

import { View, Text, StyleSheet, Dimensions,} from "react-native"
import React from 'react'

export const SLIDER_WIDTH = Dimensions.get('window').width + 80
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.4)

const ReadingCarouselItem = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Text style={styles.header}>{item.title}</Text>
      <View style={styles.something}>
      <Text>{item.difficultyLevel}</Text>
      <Text style={styles.somethingText}>{item.category}</Text>
      </View>
    </View>
  )
}

export default ReadingCarouselItem

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    borderRadius: 8,
    width: ITEM_WIDTH,
    height: '50%',
    paddingBottom: 5,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,
    flexDirection: 'column',
  },

  header: {
    flex: 1,
    paddingTop: 10,
    color: 'black',
    fontWeight: 'bold',
    fontSize: 70,
  },

  something: {
    fontWeight: 'bold',
    backgroundColor: 'rgba(0,0,0,1)',
    zIndex: 100,
    padding: 10,
    opacity: 0.7,
  },

  somethingText:{
    fontWeight: 'bold',
    color: 'white',
    fontSize: 30,
  }
})

ReadingCarousel.js

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import Carousel from 'react-native-snap-carousel'
import ReadingCarouselItem, { ITEM_WIDTH, SLIDER_WIDTH } from './ReadingCarouselItem'  
import ExtractCatalogue from '../../../ExtractCatalogue'

const ReadingCarousel = () => {
    const isCarousel = React.useRef(null)

  return (
    <View>
        <Carousel
        layout='default'
        layoutCardOffset={9}
        ref={isCarousel}
        data={ExtractCatalogue}
        renderItem={ReadingCarouselItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        inactiveSlideShift={0}
        useScrollView={false}
        />
    </View>
  )
}

export default ReadingCarousel

const styles = StyleSheet.create({})

问题图示

刷新后异常状态：
修改样式临时修复：

原因分析与解决方案

可能原因

窗口尺寸计算时机错误：Dimensions.get('window')在应用启动、横屏锁定完成前就执行，获取的是竖屏尺寸，横屏切换后未重新计算，导致组件使用旧尺寸值渲染。
第三方轮播组件适配问题：react-native-snap-carousel在平板横屏场景下的渲染逻辑存在延迟，未响应窗口尺寸变化。
静态样式未触发重渲染：硬编码的尺寸值在窗口变化后未更新，组件没有重新计算布局。

解决方案

1. 动态监听窗口尺寸变化

替换Dimensions.get为useWindowDimensions，实时监听窗口尺寸更新组件布局：

// ReadingCarouselItem.js
import { View, Text, StyleSheet, useWindowDimensions } from "react-native"
import React, { useState, useEffect } from 'react'

const ReadingCarouselItem = ({item, index}) => {
  const { width: windowWidth } = useWindowDimensions();
  const [itemWidth, setItemWidth] = useState(Math.round((windowWidth + 80) * 0.4));

  useEffect(() => {
    setItemWidth(Math.round((windowWidth + 80) * 0.4));
  }, [windowWidth]);

  return (
    <View style={[styles.container, { width: itemWidth }]} key={index}>
      <Text style={styles.header}>{item.title}</Text>
      <View style={styles.something}>
      <Text>{item.difficultyLevel}</Text>
      <Text style={styles.somethingText}>{item.category}</Text>
      </View>
    </View>
  )
}

export default ReadingCarouselItem

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    borderRadius: 8,
    height: '50%',
    paddingBottom: 5,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,
    flexDirection: 'column',
  },
  // 保留其他原有样式
})

// ReadingCarousel.js
import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React, { useState, useEffect } from 'react'
import Carousel from 'react-native-snap-carousel'
import ReadingCarouselItem from './ReadingCarouselItem'  
import ExtractCatalogue from '../../../ExtractCatalogue'

const ReadingCarousel = () => {
  const { width: windowWidth } = useWindowDimensions();
  const [sliderWidth, setSliderWidth] = useState(windowWidth + 80);
  const [itemWidth, setItemWidth] = useState(Math.round((windowWidth + 80) * 0.4));
  const isCarousel = React.useRef(null)

  useEffect(() => {
    const newSliderWidth = windowWidth + 80;
    setSliderWidth(newSliderWidth);
    setItemWidth(Math.round(newSliderWidth * 0.4));
  }, [windowWidth]);

  return (
    <View>
        <Carousel
        layout='default'
        layoutCardOffset={9}
        ref={isCarousel}
        data={ExtractCatalogue}
        renderItem={ReadingCarouselItem}
        sliderWidth={sliderWidth}
        itemWidth={itemWidth}
        inactiveSlideShift={0}
        useScrollView={false}
        />
    </View>
  )
}

export default ReadingCarousel

2. 等待横屏锁定完成后渲染组件

修改App.js，确保横屏锁定完成后再渲染导航容器：

export default function App() {
  const [orientationLocked, setOrientationLocked] = useState(false);

  useEffect(() => {
    LockOrientation();
  }, []);

  const LockOrientation = async () => {
    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
    setOrientationLocked(true);
  };

  if (!orientationLocked) {
    return <View style={{flex:1, justifyContent:'center', alignItems:'center'}}><Text>加载中...</Text></View>;
  }

  return (
    <PaperProvider>
      <NavigationContainer>
        <StackNavigator />
        <StatusBar style="auto" />
      </NavigationContainer>
    </PaperProvider>
  );
}

3. 强制组件重渲染

在ReadingCatalogue组件中添加窗口尺寸依赖的key，触发组件重新渲染：

import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'
import ReadingCarousel from '../../Displays/ExtractCarousel/ReadingCarousel'

const ReadingCatalogue = () => {
  const { width } = useWindowDimensions();
  return (
    <View style={styles.container} key={width}>
        <Text style={styles.pageHeader}>What Would You Like To Read?</Text>
      <ReadingCarousel/>
    </View>
  )
}

export default ReadingCatalogue

4. 检查第三方组件兼容性

确认react-native-snap-carousel是否适配当前React Native/Expo版本，尝试升级或降级组件，或替换为更稳定的轮播组件（如react-native-reanimated-carousel）。

内容的提问来源于stack exchange，提问作者ace brown

React Native+Expo联想平板刷新后组件尺寸异常求助

问题描述 #

相关代码片段 #

App.js #

ReadingCatalogue.js #

ReadingCarouselItem.js #

ReadingCarousel.js #

问题图示 #

原因分析与解决方案 #

可能原因 #

解决方案 #