我用图片创建了一个背景组件

Question

我创建了一个带有图片的背景组件。我想在所有屏幕的导航器中使用它，但我得到了错误错误：导航器只能包含"Screen"、"Group"或"React.FFragment"作为其直接子项(找到"BackgroundImage"(。若要在导航器中呈现此组件，请在"component"道具中将其传递给"Screen"。

return (
<BackgroundImage>
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: Colors.header },
headerTintColor: 'white',
contentStyle: { backgroundColor: Colors.primary100 },
}}
>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</BackgroundImage>

)；}

我的组件

const image = require('../assets/background/home.png');
const BackgroundImage = ({children}) => (
<ImageBackground source={image} style={styles.image}>
{children}
</ImageBackground>
);

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
image: {
flex: 1,
justifyContent: 'center'
}
});
export default BackgroundImage;

我这个案例是工作

function HomeScreeen() {
return (
<BackgroundImage>
<View style={styles.rootContainer}>
<Image source={logo} />
<Text style={styles.title}>Test!</Text>
</View>
</BackgroundImage>
);
}

Answer 1

@superDev1117我在这个文件中使用NavigationContener；错误：看起来您已将"NavigationContainer"嵌套在另一个容器中。通常情况下，你只需要在应用程序的根目录下有一个容器，所以这可能是一个错误。如果这是有意的，请显式传递"independent=｛true｝"。请注意，这将使子导航器与父导航器断开连接，并且您将无法在它们之间导航">

function Navigation() {
const authCtx = useContext(AuthContex);
return (
<NavigationContainer>
{!authCtx.isAuthenticated && <AuthStack />}
{authCtx.isAuthenticated && <AuthenticatedStack />}
</NavigationContainer>

Answer 2

在这种情况下不能使用BackgroundImage组件。试试这个：

在根组件上，

<BackgroundImage>
<NavigationContainer> // from '@react-navigation/native';
<Stack.Navigator
...
/>
</NavigationContainer>
</BackgroundImage>