首页 > 其他 > 详细

React Native Drawer Navigator 添加背景图片

时间:2021-05-05 21:46:14      阅读:27      评论:0      收藏:0      [点我收藏+]

给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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!