Question

我在使用ReactNative，我正在使用本机基础和反应导航npm。

我得到了这个，我的问题是我如何能有一个标题，直到按钮“Home”，我查看了react-navigation的文档，但它并没有真正清除。

https://github.com/react-community/react-navigation/blob/master/docs/api/navigators/DrawerNavigator.md

像这样（图片已修复，只是在这里放置徽标）

Answer 1

您可以为抽屉实现自定义内容组件。在那里，您还可以使用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,
})

Answer 2

对于抽屉导航，您可以添加自己的标题＆amp;使用EXTRA_OUTPUT配置页脚并创建自己的样式：
首先contentComponent然后

import { DrawerItems, DrawerNavigation } from 'react-navigation'之前的标头：

DrawerItems。

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>后的页脚：

DrawerItems。

Answer 3

您可以使用抽屉导航配置中的 contentComponent 选项来实现此目的。根据所需的配置级别，您可以采用两种方式：

方法1。

反应导航中的

DrawerItems （自行处理导航） -

import { DrawerNavigation } from 'react-navigation'
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: props => <SideMenu {...props}>
});

这将为其下方的菜单项创建一个带滚动视图的固定标题。

方法2。

创建自己的自定义组件 -

/**
 * If this thread was constructed using a separate
 * <code>Runnable</code> run object, then that
 * <code>Runnable</code> object's <code>run</code> method is called;
 * otherwise, this method does nothing and returns.
 * <p>
 * Subclasses of <code>Thread</code> should override this method.
 *
 * @see     #start()
 * @see     #stop()
 * @see     #Thread(ThreadGroup, Runnable, String)
 */
@Override
public void run() {
    if (target != null) {
        target.run();
    }
}

这里SideMenu是您在抽屉中显示的组件。您可以使用react-navigation NavigationActions.navigate（屏幕）来处理菜单项onPress上的路由。

有关第二种方法https://medium.com/@kakul.gupta009/custom-drawer-using-react-navigation-80abbab489f7

的更详细说明

Answer 4

嵌套导航器应该是这样的：

const Router = StackNavigator({
    Home: {screen: HomeScreen},
    Test: {screen: TestScreen}
}, {
    navigationOptions: {
        headerStyle: {backgroundColor: '#2980b9'},
        headerTintColor: '#fff'
    }
});

const Drawer = DrawerNavigator({
    App: {screen: Router}
});

表示ui： https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/SideBar/SideBar.js https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/HomeScreen/index.js

具有反应导航的DrawerNavigation标题

4 个答案: