(react-native-tab-view) 在 TabBar 中使用 navigation.navigate？

Question

我对 React Native 完全陌生，我正在为我们的一个客户构建一个应用程序。

我创建了一个屏幕，其中显示了可以按字母顺序显示或按类别分组的名称列表。我使用react-native-tab-view 组件来完成这项工作。这两个选项卡中的每一个都呈现各自的屏幕组件，ScreenMapAlpha（显示 FlatList）和ScreenMapCategory（显示 SectionList）。

对于这些列表的每个 renderItem 道具，我想使用 TouchableOpacity 使每个项目都可以点击成为详细信息页面，但是我无法让 navigation.navigate() 函数工作，因为我不断收到此消息：

TypeError: undefined is not an object（评估 '_this3.props.navigation.navigate'）

我一直在阅读react-native-tab-view Github documentation，但找不到将导航对象传递到两个 Alpha/Category 屏幕组件以使其正常工作的方法。

我的代码如下所示：

import * as React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import ScreenMapAlpha from '../screens/map_alpha';
import ScreenMapCategory from '../screens/map_cat';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const initialLayout = { width: Dimensions.get('window').width };

const renderTabBar = props => (
  <TabBar
    {...props}
    indicatorStyle={{ backgroundColor: '#fff' }}
    style={{ backgroundColor: '#c00' }}
  />
);

export default function ScreenMap({ navigation }) {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'first', title: 'Alphabetical' },
        { key: 'second', title: 'Category' }
    ]);

    const renderScene = SceneMap({
        first: ScreenMapAlpha,
        second: ScreenMapCategory
    });

    return (
        <TabView
            navigationState={{index, routes}}
            renderScene={renderScene}
            onIndexChange={setIndex}
            renderTabBar={renderTabBar}
            initialLayout={initialLayout}
            navigation={navigation}
        />
    )  
}

map_alpha.js

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, FlatList, Image, TouchableOpacity } from 'react-native';
import TenantListAlpha from '../shared/tableTenantAlpha';

export default function ScreenMapAlpha({ navigation }) {       
    return (
        <View style={styles.container}>
            <TenantListAlpha navigation={navigation} />
        </View>
    )  
}

map_cat.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import TenantListCat from '../shared/tableTenantCat';

export default function ScreenMapCategory({ navigation }) {
    return (
        <View style={styles.container}>
            <TenantListCat navigation={navigation} />
        </View>
    )  
}   

我正在为这个应用程序使用 StackNavigator：

mapstack.js

import { createStackNavigator, createTopTabNavigator } from 'react-navigation-stack';
import Map from '../screens/map.js';
import React from 'react';
import CommonHeader from '../shared/header';
import TenantDetail from '../screens/tenant_detail';

const screens = {
    Map: {
        screen: Map,
        navigationOptions: ({ navigation }) => {
            return {
                headerTitle: () => <CommonHeader navigation={navigation} title="Directory" />
            }
        }
    },
    TenantDetail: {
        screen: TenantDetail,
        navigationOptions: ({ navigation }) => {
            return {
                //headerTitle: () => <CommonHeader navigation={navigation} title="News" />
                headerTitle: () => <Text>Directory</Text>
            }
        }
    }
}

const MapStack = createStackNavigator(screens);

export default MapStack;

我这辈子都想不通 - 如何将导航对象从父屏幕传递到选项卡中的两个屏幕，以便 navigation.navigate() 工作？

Answer 1

看起来您实际上并没有使用反应导航。我会实现它，然后将导航道具传递到您的所有屏幕，您还可以使用useNavigation() 钩子。

https://github.com/satya164/react-native-tab-view#react-navigation

https://reactnavigation.org/docs/tab-based-navigation

编辑： 我强烈建议实现其中一个 react-navigation 选项卡视图包装器，但是您可以通过正确传递导航属性来使当前代码正常工作。

从您的问题中的 github 页面： https://github.com/satya164/react-native-tab-view#renderscene-required

If you need to pass additional props, use a custom renderScene function:

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute foo={this.props.foo} />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

在你的情况下看起来像：

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <ScreenMapAlpha navigation={navigation} />;
    case 'second':
      return <ScreenMapCategory navigation={navigation} />;
    default:
      return null;
  }
};

Answer 2

在 const.js 中创建一个函数

import React from 'react';
import { useNavigation } from '@react-navigation/native'; 

export const withNavigation = (Component: any) => {
  return (props: any) => {
    const navigation = useNavigation();

    return <Component navigation={navigation} {...props} />;
  };
};

在您的组件中导入和使用

import {
  withNavigation,
} from '../../helpers/functions';


export default  withNavigation(OrgWiseEvents)