#javascript #react-native #error-handling
#javascript #react-native #обработка ошибок
Вопрос:
Я пытаюсь создать нижнюю панель навигации с помощью React Native со значками, но у меня появляется эта ошибка, только один экспорт по умолчанию разрешен для каждого модуля. Проблема возникает из последней строки экспорт по умолчанию createAppContainer(TabNavigator);
Я попытался сделать это таким образом: экспортировать по умолчанию createAppContainer (TabNavigator) (Home) и удалить экспорт по умолчанию в мой Home.js компонент, но он тоже не работает.
Кто-нибудь знает, что я делаю неправильно. Любая помощь будет приветствоваться!
import React, {Component} from 'react'
import {Text, View, StyleSheet } from 'react-native';
import {createBottomTabNavigator, createAppContainer } from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {Icon} from 'react-native-elements';
import Profile from "./Profile";
import Appointment from "./Appointment";
const styles = StyleSheet.create({
homeText: {
fontSize: 40,
},
homeCont: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
})
export default class Home extends Component {
render() {
return(
<View style={styles.homeCont}>
<Text style={styles.homeText}>HOME SCREEN</Text>
</View>
)
}
}
const TabNavigator= createMaterialBottomTabNavigator({
Home: {screen:Home,
navigationOptions: {
tabBarLabel: 'Home',
activeColor: '#ff0000',
inactiveColor: '#000000',
barStyle: {backgroundColor: '#67baf6'},
tabBarIcon:() => (
<View>
<Icon name={'home'} size={25} style={{color:'#ff000'}} />
</View>
)
}
},
Appointment: {screen:Appointment,
navigationOptions: {
tabBarLabel: 'Appointment',
activeColor: '#ff0000',
inactiveColor: '#000000',
barStyle: {backgroundColor: '#67baf6'},
tabBarIcon:() => (
<View>
<Icon name={'calendar'} size={25} style={{color:'#ff000'}} />
</View>
)
}
},
Profile: {screen:Profile,
navigationOptions: {
tabBarLabel: 'Profile',
activeColor: '#ff0000',
inactiveColor: '#000000',
barStyle: {backgroundColor: '#67baf6'},
tabBarIcon:() => (
<View>
<Icon name={'person'} size={25} style={{color:'#ff000'}} />
</View>
)
}
}
});
export default createAppContainer(TabNavigator); Ответ №1:
Проблема в том, что вы экспортируете домашний компонент `
export default class Home extends Component {
render() {
return(
<View style={styles.homeCont}>
<Text style={styles.homeText}>HOME SCREEN</Text>
</View>
)
}
}
Вместо этого выполните
function Home () {
return(
<View style={styles.homeCont}>
<Text style={styles.homeText}>HOME SCREEN</Text>
</View>
)
}
Комментарии:
1. Отлично! Я удалил экспорт по умолчанию из Home. теперь у меня есть эта ошибка: этот навигатор имеет как навигационные, так и контейнерные реквизиты, поэтому неясно, должен ли он владеть своим собственным состоянием. Удалите реквизит: «маршрут», если навигатор должен получить свое состояние из навигационного реквизита. Если навигатор должен поддерживать свое собственное состояние, не передавайте навигацию, которую я не понимаю, кажется, все в порядке, я не вижу, где ошибка