Question

我正在从 V1 升级到 V5。我在标签导航器中使用屏幕道具时遇到了一些麻烦。它们是自动从父母传给孩子的。我有这个标签组件

<TeacherContactSelectorTabs
  screenProps={{
    contactUsers: contactUsers,
    contactGroups: contactGroups,
    teacherList: teacherList,
    onUserSearch: this._userSearch,
    onGroupSearch: this._groupSearch,
    isTeacherSelected: this.contactSelectedUser,
    onSelectTeacher: this._selectContactUser,
    teacherListLoading: this.props.teacherListLoading,
    onChangeUserOption: this.changeUserOption,
    onContactSelectedUser: this.contactSelectedUser,
    oncontactSelectedGroup: this.contactSelectedGroup,
    onSelectContactUser: this._selectContactUser,
    onSelectContactGroup: this._selectContactGroup,
    selectedIcon: selectedIcon,
    noIcon: noIcon,
    groupSearching: this.props.groupSearching,
    userSearching: this.props.userSearching,
    defaultAvailableGroups: this.props.defaultAvailableGroups,
    openGroupUserSelector: this._openGroupUserSelector,
    onSubmitUsersOfGroup: this._onSubmitUsersOfGroup,
    addContactGroup: this.addContactGroup,
    removeContactGroup: this.removeContactGroup,
    addContactUser: this.addContactUser,
    removeContactUser: this.removeContactUser,
    addGroupNotAll: this.addGroupNotAll,
    removeGroupNotAll: this.removeGroupNotAll,
  }}
  onNavigationStateChange={(prevState, currentState) => {
    updateFocus(currentState)
  }}
/>

在我的标签文件中我有这个代码

import { TabNavigator } from 'react-navigation';
import SearchByGroup from './SearchByGroup';
import SearchByUser from './SearchByUser';

const ContactSelectorTabs = TabNavigator({
    SearchByGroup: {
        screen: SearchByGroup,
        navigationOptions: {
            tabBarTestIDProps: {accessibilityLabel: 'Grupper'},
            tabBarAccessibilityLabel: 'Grupper'
        }
    },
    SearchByUser: {
        screen: SearchByUser,
        navigationOptions: {
            tabBarTestIDProps: {accessibilityLabel: 'Personer'},
            tabBarAccessibilityLabel: 'Personer',
        }
    },
},{
    tabBarPosition: 'top',
    tabBarOptions: {
        ...
    },
    initialRouteName: 'SearchByGroup'
});

export default ContactSelectorTabs

我像这样将此代码转换为 V5

import React from 'react'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import SearchByGroup from './SearchByGroup'
import SearchByUser from './SearchByUser'
import { navigate } from '@/Navigators/Root'

const Tab = createMaterialTopTabNavigator()

const ContactSelectorTabs = (params: any) => {
  return (
    <Tab.Navigator
      initialRouteName="SearchByUser"
      tabBarPosition="top"
      tabBarOptions={{
       ...
      }}
    >
      <Tab.Screen
        name="SearchByGroup"
        options={{
          tabBarLabel: 'Grupper',
          title: 'Grupper',
          tabBarAccessibilityLabel: 'Grupper',
          tabBarTestID: 'Grupper',
        }}
      />
      <Tab.Screen
        name="SearchByUser"
        options={{
          tabBarLabel: 'Personer',
          title: 'Personer',
          tabBarAccessibilityLabel: 'Personer',
          tabBarTestID: 'Personer',
        }}
      />
    </Tab.Navigator>
  )
}

export default ContactSelectorTabs

在渲染功能的标签屏幕中，我是这样做的

var { contactUsers, onUserSearch, userSearching } = this.props.screenProps

但屏幕道具未定义。我可以在这里得到任何帮助吗？

React Navigation 从 v1 迁移到 v5

0 个答案: