代码之家 › 专栏 › 技术社区 › falamiw

是否有办法将“选项”转换为与“navigationOptions”相同的功能?

react-navigation-stack react-native-navigation react-native

1

falamiw · 技术社区 · 5 年前

目前,我正在学习一门课程: 使用React Native进行多平台移动应用开发 在课程中,每次讲座后我都会被卡住,因为老师使用 react-navigation@2.0.1 但我想确保学习最新版本(v5)。在这次讲座中,他创建了一个堆栈导航器,并在屏幕上显示了一个图标,

import {createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <Icon
            name="menu"
            size={24}
            color="white"
            onPress={() => navigation.toggleDrawer()}
          />
        ),
      }),
    },
    Dishdetail: { screen: Dishdetail },
  },
  {
    initialRouteName: 'Menu'
  }
);

在哪里? navigationOptions 可以是对象,也可以是接受道具的功能。

我把它转换成,

import { createStackNavigator } from '@react-navigation/stack';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator();
function MenuNavigatorScreen() {
  return (
    <MenuNavigator.Navigator
      initialRouteName="Menu"
      screenOptions={HeaderOptions}
    >
      <MenuNavigator.Screen
        name="Menu"
        component={Menu}
      />
      <MenuNavigator.Screen
        name="Dishdetail"
        component={Dishdetail}
        options={{ headerTitle: 'Dish Detail' }}
      />
    </MenuNavigator.Navigator>
  );
}

但我很困惑如何转换 导航选项 功能到我的代码中。因为他们 docs 没有告诉我如何滚动 options 将对象转化为函数 navigation 道具?

还有一件事是他在用 drawerIcon ,

const MainNavigator = createDrawerNavigator(
  {
      navigationOptions: {
        drawerLabel: 'Login',
        drawerIcon: ({ tintColor }) => (
          <Icon
            name="sign-in"
            type="font-awesome"
            size={24}
            color={tintColor}
          />
        ),
      }
...

但我没有找到任何相关的东西 drawerIcon 抽屉导航 docs
如果有人能帮我解决这个问题,我衷心感谢。

0 回复 | 直到 5 年前

1

3

emonhossain 5 年前

首先,The options prop可用于配置导航器内的各个屏幕。还有 headerLeft 是一个函数,它返回一个React元素以显示在标题的左侧。当使用一个函数时,它在呈现时会收到多个参数(onPress、label、labelStyle等-检查 types.tsx 完整列表)。

options = {
    ({
        navigation
    }) => ({
        headerLeft: () => ( <
            Icon name = 'menu'
            size = {
                24
            }
            color = 'white'
            onPress = {
                () =>
                navigation.toggleDrawer()
            }
            />
        )

    })
}

为了 drawerIcon 使用:

options = {
    {
        drawerIcon: ({
            tintColor
        }) => ( <
            Icon name = 'home'
            type = 'font-awesome'
            size = {
                24
            }
            color = {
                tintColor
            }
            />
        )
    }
}