给React Navigation Drawer添加背景图片,经过一番搜索,在stackoverflow找到了答案。
答案具体给出的思路是:通过自定义渲染组件来实现背景图的添加。其实,官方关于createDrawerNavigator的props描述里也写到了关于这个问题的描述。
简易代码如下
import {createDrawerNavigator, DrawerItemList } from "@react-navigation/drawer"
const Drawer = createDrawerNavigator()
const HomeScreen = ({navigation: nav}) => (
<View>
<Text>this is home screen</Text>
<Button title="to About" onPress={()=>{nav.navigate("About", {sender: "Me", id: Math.random()})}}></Button>
</View>
)
const AboutScreen = ()=>(<Text>hhh</Text>)
const App: () => Node = () => {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={props=>{
return (
<SafeAreaView style={{backgroundColor:"orange", flex: 1}}>
<ImageBackground source={{uri: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1834251466,3449438457&fm=11&gp=0.jpg"}} style={{height: "100%"}} blurRadius={3}>
<DrawerItemList {...props}></DrawerItemList>
</ImageBackground>
</SafeAreaView>)
}}
>
<Drawer.Screen name="Home" component={HomeScreen}></Drawer.Screen>
<Drawer.Screen name="About" component={AboutScreen}></Drawer.Screen>
</Drawer.Navigator>
</NavigationContainer>
);
};
要注意的问题:React Navigation大概是将不同的组件进行了更明确的分类,所以组件的导入可能稍有差别(目前大都在@react-navigation/子分类下),但思路都是一样的。
--- 补个效果图 ---

相关链接:React Navigation官方文档, 这里有详尽的关于React Navigation的介绍。
React Native Drawer Navigator 添加背景图片
原文:https://www.cnblogs.com/noah227/p/14732140.html