

React nativeのNavigationで共通のエラー画面を作りたいのですが、遷移させてみても画面が真っ白です。  
こういった実装はできないのでしょうか。

App.tsx

[code]

    import {NavigationContainer} from "@react-navigation/native";
    import React from "react";
    import {createNativeStackNavigator, NativeStackScreenProps} from "@react-navigation/native-stack";
    import {Home} from "./Home";
    import Input from "./Input";
    import {Provider} from "react-redux";
    import store from "./store/store";
    import Expo from "./Expo";
    import Err from "./Error";
    
    export type StockParam={
        Homepage:undefined,
        Input:undefined,
        Expo:{
            id:string
        },
        Error:{
            cause:Error,
            info:object
        },
    }
    
    export type Props = NativeStackScreenProps<StockParam>;
    
    export default function App(){
        return(
            <Provider store={store}>
            <NavigationContainer>
                <stack.Navigator initialRouteName={"Homepage"}>
                    <stack.Screen name={"Homepage"} component={Home}/>
                    <stack.Screen name={"Input"} component={Input}/>
                    <stack.Screen name={"Expo"} children={Expo}/>
                    <stack.Screen name={"Error"} component={Err}/>
                </stack.Navigator>
            </NavigationContainer>
            </Provider>
        );
    }
    
    
    const stack = createNativeStackNavigator<StockParam>();
    
[/code]

Expo.tsx

[code]

    import React from "react";
    import {Button, Text, View} from "react-native";
    import {NativeStackScreenProps} from "@react-navigation/native-stack";
    import {StockParam} from "./App";
    import {useAppSelector} from "./hooks";
    import {expoType} from "./store/expoSlice";
    import ErrorBoundary from "react-native-error-boundary";
    import ExpoDetail from "./ExpoDetail";
    
    
    interface Props extends NativeStackScreenProps<StockParam, "Expo">{}
    
    export default  function Expo({route,navigation}:Props) {
        const id = route.params.id;
        const expos = useAppSelector(state => state.expo.expos);
        const got = expos.find(e => e.id == id);
        if (got ?? false) {
            return <View>
    
            </View>
        }
        navigation.navigate("Error",{
            cause:new Error("not fund"),
            info:{}
        });
        return <></>
    }
    
[/code]

Error.tsx

[code]

    import React from "react";
    import {StockParam} from "./App";
    import {Button, Text, View} from "react-native";
    import {NativeStackScreenProps} from "@react-navigation/native-stack";
    
    interface Props extends NativeStackScreenProps<StockParam, "Error">{}
    export default function Err({route,navigation}:Props){
        return<View>
            <Text>
                {route.params.cause.message}
            </Text>
            <Button title={"Go Back"} onPress={()=>{navigation.pop()}}/>
        </View>
    }
    
[/code]


CC BY-SA 4.0
2023-02-15T00:02:53.227
93839
2023-02-15T00:07:26.037
2023-02-15T00:07:26.037
34523
34523
question
reactjs react-native
React-nativeでエラー画面を実装したいが、エラー画面が真っ白になってしまう。