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

Question

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

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

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

类型错误：未定义不是对象（正在评估“_this3.props.navigation.navigate”）

我一直在阅读react-native-tab-view Github 文档，但我找不到将导航对象传递到两个 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}
        />
    )  
}

地图_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>
    )  
}

地图猫.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：

地图堆栈.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选项卡视图包装器之一，但是您可以通过正确传递navigation prop来使当前代码正常工作。

从您的问题中的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;
  }
};