React Native Windows简单栈导航返回/跳转页面空白问题求助

问题描述 #

我在React Native中实现了一个包含Home和Profile页面的栈导航应用，从Home跳转Profile正常，但在Profile页面点击“Go To Home”或“Go Back”后页面变空白，无报错信息。

代码文件 #

App.tsx #

import React from 'react'
import { SafeAreaView } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import HomeScreen from './components/HomeScreen'
import ProfileScreen from './components/ProfileScreen'
import RootStackParamList from './routes'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

const RootStack = createNativeStackNavigator<RootStackParamList>()

function App() {
  return (
    <SafeAreaView style={{flex:1}}>
    <NavigationContainer>
      <RootStack.Navigator initialRouteName='Home'>
        <RootStack.Screen name='Home'component={HomeScreen} options={{title:'Home'}}/>
        <RootStack.Screen name='Profile' component={ProfileScreen} options={{title:'Profile'}}/>
      </RootStack.Navigator>
    </NavigationContainer>
    </SafeAreaView>
  );
}

export default App;

HomeScreen.tsx #

import React from 'react'
import { Text, View,Button } from 'react-native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import RootStackParamList from '../routes'

type HomeScreenProps = NativeStackScreenProps<RootStackParamList,'Home'>

const HomeScreen = ({navigation}:HomeScreenProps) => {
  return (
    <View style={{margin:10,backgroundColor:"yellow",flex:1,justifyContent:"center"}}>
        <Text style={{color:"blue",fontSize:20,textAlign:"center"}}>Home!</Text>   
        <Button title='Go To Profile' 
        color="#841584"
        onPress={()=>navigation.navigate("Profile")}/>
    </View>
  )
}

export default HomeScreen;

ProfileScreen.tsx #

import { NativeStackScreenProps } from '@react-navigation/native-stack'
import React from 'react'
import {View,Text,Button} from "react-native"
import RootStackParamList from '../routes'

type ProfileScreenProps = NativeStackScreenProps<RootStackParamList,'Profile'>

const ProfileScreen = ({navigation}:ProfileScreenProps) => {
  return (
    <View style={{margin:10,backgroundColor:"red",flex:1,justifyContent:"center"}}>
        <Text style={{color:"white",fontSize:20,textAlign:"center"}}>
            Profile!
        </Text>
        <Button title='Go To Home' 
        color="#841584"
        onPress={()=>navigation.navigate("Home")}/>
        <Button title='Go Back' 
        color="#841584"
        onPress={()=>navigation.goBack()}/>
    </View>
  )
}

export default ProfileScreen;

依赖配置 #

"@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "react": "18.2.0",
    "react-native": "0.71.0",
    "react-native-gesture-handler": "^2.10.1",
    "react-native-reanimated": "^3.1.0",
    "react-native-safe-area-context": "^4.5.3",
    "react-native-screens": "^3.20.0",
    "react-native-windows": "0.71.13",
    "react-navigation-stack": "^2.10.4"

问题原因及修复方法 #

1. SafeAreaView嵌套错误
   NavigationContainer被包裹在SafeAreaView内部，返回页面时会触发布局异常。需将SafeAreaView移至每个屏幕组件内部，而非包裹导航容器。

修改App.tsx：

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import HomeScreen from './components/HomeScreen'
import ProfileScreen from './components/ProfileScreen'
import RootStackParamList from './routes'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

const RootStack = createNativeStackNavigator<RootStackParamList>()

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName='Home'>
        <RootStack.Screen name='Home' component={HomeScreen} options={{title:'Home'}}/>
        <RootStack.Screen name='Profile' component={ProfileScreen} options={{title:'Profile'}}/>
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

export default App;

2. 冗余依赖冲突
   react-navigation-stack是旧版栈导航库，与v6版本的@react-navigation/native-stack存在冲突，需卸载该冗余依赖：

npm uninstall react-navigation-stack
# 或使用 yarn：yarn remove react-navigation-stack

3. 屏幕组件添加SafeAreaView
   在每个屏幕组件内用SafeAreaView包裹内容，确保适配安全区域，以HomeScreen.tsx为例：

import React from 'react'
import { Text, View, Button, SafeAreaView } from 'react-native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import RootStackParamList from '../routes'

type HomeScreenProps = NativeStackScreenProps<RootStackParamList,'Home'>

const HomeScreen = ({navigation}:HomeScreenProps) => {
  return (
    <SafeAreaView style={{flex:1}}>
      <View style={{margin:10,backgroundColor:"yellow",flex:1,justifyContent:"center"}}>
          <Text style={{color:"blue",fontSize:20,textAlign:"center"}}>Home!</Text>   
          <Button title='Go To Profile' 
          color="#841584"
          onPress={()=>navigation.navigate("Profile")}/>
      </View>
    </SafeAreaView>
  )
}

export default HomeScreen;

按同样方式修改ProfileScreen.tsx，添加SafeAreaView包裹内容。

完成以上修改后，返回页面空白的问题即可解决，导航逻辑恢复正常。

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