react-native - 如何修复“未定义不是对象（评估'Object.keys（routeConfigs）'）”

Question

我是 React-Native 的新开发者。我正在尝试开发一个使用 React-Navigation 的应用程序。当我在手机上启动它时，会出现一个错误，我不知道为什么，因为我做了同样的“开始使用 react-navigation”。

有人可以帮助我吗？

我已经安装了“react-navigation”和“react-navigation-gesture-handler”

import React from 'react'
import {StyleSheet, Image} from 'react-native'
import {createBottomTabNavigator, createAppContainer} from "react-navigation";
import CurrentList from "../Components/CurrentList";
import OthersList from "../Components/OthersList";

const CoursesTabNavigator = createBottomTabNavigator()(
    {
        CurrentList:{
            screen: CurrentList,
            navigationOptions:{
                title:'Liste de la semaine',
                tabBarIcon: () => {
                    return <Image source={require('../Images/ic_modifier_liste.jpg')} style={styles.icon}/>
                }
            }
        },
        OthersList:{
            screen: OthersList,
            navigationOptions:{
                title: 'Anciennes listes',
                tabBarIcon: () => {
                    return <Image source={require('../Images/ic_afficher_liste.png')} style={style.icon}/>
                }
            }
        }
    },
    {
        tabBarOptions: {
            activeBackgroundColor: '#DDDDDD',
            inactiveBackgroundColor: '#FFFFFF',
            showLabel: false,
            showIcon: true
        }
    }
);

const styles = StyleSheet.create({
    icon: {
        width: 30,
        height: 30
    }
})


export default createAppContainer(CoursesTabNavigator)

标签： react-nativereact-navigation

Answer 1

您的 routeConfigs 必须在您的createBottomTabNavigator函数内：

const CoursesTabNavigator = createBottomTabNavigator(
      { // <<== this is the object routeConfigs 
        CurrentList: {
          screen: CurrentList,
          navigationOptions: {
            title: 'Liste de la semaine',
            tabBarIcon: () => (
              <Image
                source={require('../Images/ic_modifier_liste.jpg')}
                style={styles.icon}
              />
            ),
          },
        },
        OthersList: {
          screen: OthersList,
          navigationOptions: {
            title: 'Anciennes listes',
            tabBarIcon: () => (
              <Image
                source={require('../Images/ic_afficher_liste.png')}
                style={style.icon}
              />
            ),
          },
        },
      },
      {
        tabBarOptions: {
          activeBackgroundColor: '#DDDDDD',
          inactiveBackgroundColor: '#FFFFFF',
          showLabel: false,
          showIcon: true,
        },
      },
    );