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

Question

我對 React Native 完全陌生，我正在為我們的一個客戶構建一個應用程序。

我創建了一個屏幕，顯示可以按字母順序顯示或按類別分組的名稱列表。 我使用react-native-tab-view組件來完成這項工作。 這兩個選項卡中的每一個都呈現各自的屏幕組件ScreenMapAlpha （顯示 FlatList）和ScreenMapCategory （顯示 SectionList）。

對於這些列表的每個renderItem道具，我想使用 TouchableOpacity 使每個項目都可以點擊成為詳細信息頁面，但是我無法讓 navigation.navigate() function 工作，因為我不斷收到此消息：

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

我一直在閱讀react-native-tab-view Github 文檔，但我找不到將導航 object 傳遞到兩個 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;

我一輩子都想不通 - 如何將導航 object 從父屏幕傳遞到選項卡中的兩個屏幕，以便 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 中創建一個 function

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)