Блог

Я новый разработчик в React-Native. Я пытаюсь разработать приложение, которое использует React-Navigation. Когда я запускаю его на своем телефоне, появляется ошибка, и я не знаю почему, потому что я сделал то же самое с ‘get started with 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)

  

Ваши настройки маршрута должны быть внутри вашей 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,
        },
      },
    );