给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