javascript - 如何在 react-navigation 中向 stackNavigator 中的所有屏幕添加公共背景图像？

Question

我有一个 react-native 应用程序，类似于react-navigation 中描述的身份验证流程。我想为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',
    }
);

标签： javascriptreactjsreact-nativereact-navigationreact-navigation-stack

Answer 1

您可以通过修改来添加颜色cardStyle，如下所示：

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

据我所知，没有办法从样式中设置背景图像。

您可以创建自己的CardComponent.