我有一个类似于 authentication flow 的 react native 应用程序在 react 导航中描述。我想向 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',
}
);
最佳答案
您可以通过修改cardStyle
来添加颜色,如下所示:
const AppStack = createStackNavigator(
{ Home: HomeScreen, Other: OtherScreen },
{ cardStyle: { backgroundColor: "green" } }
);
据我所知,无法从样式中设置背景图像。
您可以创建自己的 CardComponent
.
关于javascript - 如何在react-navigation中向stackNavigator中的所有屏幕添加通用背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53162887/