[英]Header for DrawerNavigation with react-navigation
我在 ReactNative 上,我正在使用 native-base 和 react-navigation npm。
我得到了这个,我的问题是如何有一个标题,直到按钮“主页”,我查看了 react-navigation 的文档,但它并没有真正清除。
像这样(图片是固定的,只是在这里放了一个标志)
您可以为抽屉实现自定义内容组件。 在那里,您还可以使用DrawerItems
简单地呈现导航项。 例如:
import React from 'react'
import { Text, View } from 'react-native'
import { DrawerItems, DrawerNavigation } from 'react-navigation'
const DrawerContent = (props) => (
<View>
<View
style={{
backgroundColor: '#f50057',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 30 }}>
Header
</Text>
</View>
<DrawerItems {...props} />
</View>
)
const Navigation = DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: DrawerContent,
})
对于抽屉导航,您可以添加自己的页眉和页脚并使用contentComponent
配置制作自己的样式:
首先import { DrawerItems, DrawerNavigation } from 'react-navigation'
然后
DrawerItems
之前的DrawerItems
:
contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>
。
DrawerItems
后的页脚:
contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>
。
您可以使用抽屉导航配置中的contentComponent选项来实现它。 根据所需的配置级别,您可以通过两种方式执行此操作:
方法一。
来自 react-navigation 的DrawerItems (自行处理导航)-
import {DrawerItems, DrawerNavigation} from 'react-navigation';
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: (props) =>
<View style={{flex: 1}}>
<Text>Header</Text>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</View>
});
这会为其下方的菜单项创建一个带有滚动视图的固定标题。
方法二。
创建您自己的自定义组件-
import { DrawerNavigation } from 'react-navigation'
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: props => <SideMenu {...props}>
});
这里的 SideMenu 是您自己的要显示在抽屉中的组件。 您可以使用 react-navigation NavigationActions.navigate(screen)来处理 onPress 菜单项的路由。
有关第二种方法的更详细说明https://medium.com/@kakul.gupta009/custom-drawer-using-react-navigation-80abbab489f7
嵌套导航器应该是这样的:
const Router = StackNavigator({
Home: {screen: HomeScreen},
Test: {screen: TestScreen}
}, {
navigationOptions: {
headerStyle: {backgroundColor: '#2980b9'},
headerTintColor: '#fff'
}
});
const Drawer = DrawerNavigator({
App: {screen: Router}
});
对于用户界面:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.