return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
）;
我的代码：
import React, { useState } from "react";
import { createAppContainer, createSwitchNavigator, NavigationContainer, } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
import {TouchableOpacity} from "react-native";
import {Icon} from 'react-native-elements'
import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Ionicons } from '@expo/vector-icons';
import HomeScreenD from './src/screens/HomeScreenD';
import IngresarAD from "./src/screens/IngresarAD";
import IngresarAutoP2 from './src/screens/IngresarAutoP2';
import SearchScreen from './src/screens/SearchScreen';
import Camera1 from './src/screens/Camara';
import Filtro from "./src/screens/Filtro";
import VehiculoScreen from './src/screens/VehiculoScreen';
import TrabajosScreen from './src/screens/TrabajosScreen';
import Camera360 from "./src/screens/Camera360Screen";
import CameraInterior from "./src/screens/CameraInteriorScreen";
import CameraTest from "./src/screens/CameraScreen";
import CameraTrabajo from "./src/screens/CameraTrabajo";
import CameraCarProfile from "./src/screens/CameraCarProfile";
import Multimedia from "./src/screens/Multimedia";
import Galeria360 from "./src/screens/Galeria360";
import GaleriaAINT from "./src/screens/GaleriaAINT";
import GaleriaDaños from "./src/screens/GaleriaDaños";
import GaleriaReparacion from "./src/screens/GaleriaReparacion";
import ListVehiculo from "./src/components/ListVehiculo";
import VerListVehiculo from "./src/screens/VerListVehiculo";
import AppHeader from "./src/components/AppHeader";
import Presupuesto from "./src/screens/Presupuesto";
import Ajustes from "./src/screens/Ajustes";
import vehiculos from "./src/api/vehiculos";
const Switch= createSwitchNavigator(
{
tabNavigator:createMaterialBottomTabNavigator(
{
ingreso:createStackNavigator(
{
Home: HomeScreenD,
IngresarAD: IngresarAD,
IngresarAutoP2: IngresarAutoP2,
ListarAutos: SearchScreen,
VehiculoShow: VehiculoScreen,
Trabajos: TrabajosScreen,
Multimedia: Multimedia,
Galeria360: Galeria360,
GaleriaAINT: GaleriaAINT,
GaleriaDaños: GaleriaDaños,
GaleriaReparacion: GaleriaReparacion,
ListVehiculo: ListVehiculo,
VerListVehiculo: VerListVehiculo,
Filtro: Filtro,
},
{
initialRouteName: 'Home',
defaultNavigationOptions: ({navigation}) => ({
headerTitle: () => <AppHeader/>,
headerStyle: {
backgroundColor: '#163F62',
},
headerLeft: buttonBack(navigation),
}),
}
),
Vehiculo:createStackNavigator(
{
Vehiculo:VehiculoScreen
},
{
initialRouteName: 'Vehiculo',
defaultNavigationOptions: ({navigation}) => ({
headerTitle: () => <AppHeader/>,
headerStyle: {
backgroundColor: '#163F62',
},
headerLeft: buttonBack(navigation)
}),
},
),
Presupuesto:createStackNavigator({
Presupuesto:Presupuesto,
},
{
initialRouteName: 'Vehiculo',
defaultNavigationOptions: ({navigation}) => ({
headerTitle: () => <AppHeader/>,
headerStyle: {
backgroundColor: '#163F62',
},
headerLeft: buttonBack(navigation)
}),
},),
Ajustes:createStackNavigator({
Ajustes:Ajustes,
},
{
initialRouteName: 'Vehiculo',
defaultNavigationOptions: ({navigation}) => ({
headerTitle: () => <AppHeader/>,
headerStyle: {
backgroundColor: '#163F62',
},
barStyle:{
backgroundColor:'#FFFFFF'
},
headerLeft: buttonBack(navigation)
}),
},
),
},
),
navigator: createStackNavigator({
Camera360: Camera360,
CameraTest: CameraTest,
CameraTrabajo: CameraTrabajo,
CameraInterior: CameraInterior,
CameraCarProfile: CameraCarProfile,
}),
});
const buttonBack = navigation=>(
<TouchableOpacity onPress={() => navigation.goBack()}>
<Icon type={'Feather'} name={'chevron-left'} color={'#E59413'}/>
</TouchableOpacity>);
const AppContainer = createAppContainer (Switch);
function App() {
const [isLoadingComplete, setLoadingComplete] = useState(false);
if (!isLoadingComplete) {
return (
<AppLoading
startAsync={loadResourcesAsync}
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
);
}
else {
return isLoadingComplete ? <AppContainer /> : <AppLoading />;
}
}
async function loadResourcesAsync() {
await Promise.all([
// fuente para el builderx
// Font.loadAsync({
// "roboto-regular": require("./src/assets/fonts/roboto-regular.ttf")
// })
// fuentes para native-base
Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
})
]);
}
function handleLoadingError(error) {
console.warn(error);
}
function handleFinishLoading(setLoadingComplete) {
setLoadingComplete(true);}
export default App;
每次我尝试在我的代码中实现它
15:03 语法错误：C：\ Users \ nicol \ Documents \ GitHub \ proyectox-app \ node_modules @ react-navigation \ material-bottom-tabs \ src \ index.tsx：意外令牌（14:12）
12 | *类型 13 | * /
14 |出口类型{ | ^ 15 | MaterialBottomTabNavigationOptions， 16 | MaterialBottomTabNavigationProp， 17 | }来自“ ./types”； 错误 15:03 构建JavaScript包：错误
答案 0 :(得分：0)
如果使用npm
rm -rf node_modules
rm package-lock.json
npm install
如果使用毛线：
rm -rf node_modules
rm yarn.lock
yarn