Как добавить общее фоновое изображение для всех экранов в stackNavigator в реагирующей навигации?

Question

У меня есть приложение-ответ, похожее на поток проверки подлинности , описанный в реакции-навигации. Я хочу добавить общее фоновое изображение для всех экранов в AppStack .

Вещи, которые я пробовал,

• Я попытался обернуть AppStack навигатор внутри <ImageBackground/> и почему-то экранная карта всегда сверху.

Мне нужна помощь!

Фрагмент кода

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen, SignUp: SignUpScreen });

class SignInScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'transparent' }}>
                <View style={{ width: '50%', backgroundColor: 'white' }}>
                    <Text>Sign in</Text>
                </View>

            </View>
        )
    }
}

class SignUpScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'transparent' }}>
                <View style={{ width: '50%', backgroundColor: 'white' }}>
                    <Text>Sign up</Text>
                </View>

            </View>
        )
    }
}

class Authentication extends React.Component {
    render() {
        return (
            <ImageBackground source={source} style={{ flex: 1 }} >
                <AuthStack />
            </ImageBackground>
        )
    }
}

export default createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppStack,
        Auth: Authentication,
    },
    {
        initialRouteName: 'Auth',
    }
);

Answer 1

Вы можете добавить цвет, изменив cardStyle, например:

const AppStack = createStackNavigator(
  { Home: HomeScreen, Other: OtherScreen },
  { cardStyle: { backgroundColor: "green" } }
);

Насколько я знаю, нет способа установить фоновое изображение из стилей.

Вы можете создать свой собственный CardComponent.