React Native Windows 栈导航返回页面无报错白屏问题

• 基于React Native Windows实现栈导航跳转链路：Home页面 -> Movie页面 -> 返回Home页面
• 正向跳转（Home触发进入Movie）流程完全正常
• Movie页面触发返回Home时，屏幕直接变为空白，全程控制台无任何错误信息输出

"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"@rneui/base": "^4.0.0-rc.4",
"@rneui/themed": "^4.0.0-rc.4",
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.13.1",
"react-native-vector-icons": "^9.1.0",
"react-native-windows": "0.68.6"

App.js #

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {ThemeProvider} from '@rneui/themed';

import theme from './src/styles/theme';

import Home from './src/page/Home/Home';
import Movie from './src/page/Movie/Movie';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <ThemeProvider theme={theme}>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Movie" component={Movie} />
        </Stack.Navigator>
      </ThemeProvider>
    </NavigationContainer>
  );
};

export default App;

Home.js #

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {useNavigation} from '@react-navigation/native';

import {Button} from '@rneui/themed';

const Home = () => {
  const navigation = useNavigation();
  console.log(navigation.getState());
  return (
    <View>
      <Text style={styles.centerText}>HOME</Text>
      <Button
        title="Go to Movie."
        onPress={() => navigation.navigate('Movie')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  centerText: {
    textAlign: 'center',
  },
});

export default Home;

Movie.js #

import {StyleSheet, View, Text} from 'react-native';
import {useNavigation} from '@react-navigation/native';

import {Button} from '@rneui/themed';

const Movie = () => {
  const navigation = useNavigation();
  console.log(navigation.getState());
  return (
    <View>
      <Text style={styles.centerText}>MOVIE</Text>
      <Button
        title="Go to Home. "
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  centerText: {
    textAlign: 'center',
  },
});

export default Movie;

• 核心问题是*react-native-screens@3.13.1版本在Windows端存在原生渲染兼容bug*：native-stack导航执行pop回退操作时（调用navigation.navigate('Home')返回栈内已存在的Home路由，本质是弹出栈顶的Movie页面），原生层Screen容器卸载后没有正确触发底层Home页面的重绘，直接渲染空白原生视图层。由于异常出现在原生视图渲染层，JS层没有捕获到错误，因此控制台无任何报错输出。
• 两个页面的根View组件均未设置flex:1样式，页面重绘时无法自动撑满父容器，会进一步提升空白渲染的触发概率。

1. 解决依赖兼容问题：将react-native-screens版本降级到3.10.2（该版本在RNW 0.68上验证过栈导航回退无渲染问题），或者升级到3.18.0以上已修复Windows端回退空白问题的正式版本，重新执行windows原生模块自动链接。
   执行命令参考：

   yarn add react-native-screens@3.10.2
   npx react-native autolink-windows
   

2. 修正页面根容器样式：给Home和Movie页面的根View添加flex:1样式，保证页面容器能撑满整个导航可用区域：

   // 两个页面的样式新增容器类
   const styles = StyleSheet.create({
     container: {
       flex: 1
     },
     centerText: {
       textAlign: 'center',
     },
   });
   // 页面内根View绑定样式
   <View style={styles.container}>
   

3. 回退操作优先使用navigation.goBack()API：栈导航的返回操作不需要手动指定路由名，直接调用goBack可以避免不必要的路由匹配逻辑，降低原生层异常触发概率，Movie页面的按钮onPress修改为：

   <Button
     title="返回Home"
     onPress={() => navigation.goBack()}
   />
   

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