React Native Drawer Navigator 添加背景图片

给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的介绍。

 

转载请注明出处@https://www.cnblogs.com/noah227/p/14732140.html