Navigation in React native

[PeterBaumler]

Hallo ich habe dieses Problem hier (siehe Foto) ich habe eine doppelte Homebar am oberen Rand des Bildschirms deshalb wollte ich fragen ob mir möglicherweise jemand helfen kann diese wegzubekommen ich brauche nur eine die oben Home anzeigt.

Das ist meine App.js:

import React from 'react';
import { NavigationContainer } from '@React-navigation/native';
import { createStackNavigator } from '@React-navigation/stack';
import { createBottomTabNavigator } from '@React-navigation/bottom-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
import HomeScreen from './Screens/HomeScreen';
import StatisticsScreen from './Screens/StatisticsScreen';
import InformationScreen from './Screens/InformationScreen';
import SettingsScreen from './Screens/SettingsScreen';
import SelectionScreen from './Screens/SelectionScreen';
import QuantityScreen from './Screens/QuantityScreen';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const HomeStack = createStackNavigator();
const HomeStackScreen = () => (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="Selection" component={SelectionScreen} />
<HomeStack.Screen name="Quantity" component={QuantityScreen} />
</HomeStack.Navigator>
);
const App = () => {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="HomeStack" // Ändere den initialRouteName auf "HomeStack"
screenOptions={({ route }) => ({
tabBarActiveTintColor: 'blue',
tabBarInactiveTintColor: 'gray',
tabBarLabelStyle: {
fontSize: 14,
},
tabBarIcon: ({ color, size }) => {
let iconName;
if (route.name === 'HomeStack') { // Ändere den Namen hier entsprechend
iconName = 'home';
} else if (route.name === 'Statistics') {
iconName = 'chart-bar';
} else if (route.name === 'Information') {
iconName = 'info-circle';
} else if (route.name === 'Settings') {
iconName = 'cog';
}
return <FontAwesome5 name={iconName} color={color} size={size} />;
},
})}
<Tab.Screen
name="Home" // Ändere den Namen hier entsprechend
component={HomeStackScreen} // Verwende den HomeStackScreen als Komponente
options={{ tabBarLabel: 'Home' }}
/>
<Tab.Screen
name="Statistics"
component={StatisticsScreen}
options={{ tabBarLabel: 'Statistiken' }}
/>
<Tab.Screen
name="Information"
component={InformationScreen}
options={{ tabBarLabel: 'Informationen' }}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{ tabBarLabel: 'Einstellungen' }}
/>
</Tab.Navigator>
</NavigationContainer>
);
};
export default App;

 

[madmax2010]

nutz doch mal bitte eine codebox (3punkte mitte rechts..) im forum, oder pack es auf jsfiddle und verlink das hier. So ist das doch unnoetig fummelig und nervig zu lesen

 

[PeterBaumler]

Hab gerade gesehen dass man den Code so nicht wirklich lesen kann deshalb hier nochmal besser!

Ergänzung (6. September 2023)

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
import HomeScreen from './Screens/HomeScreen';
import StatisticsScreen from './Screens/StatisticsScreen';
import InformationScreen from './Screens/InformationScreen';
import SettingsScreen from './Screens/SettingsScreen';
import SelectionScreen from './Screens/SelectionScreen';
import QuantityScreen from './Screens/QuantityScreen';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeStack = createStackNavigator();

const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={HomeScreen} />
    <HomeStack.Screen name="Selection" component={SelectionScreen} />
    <HomeStack.Screen name="Quantity" component={QuantityScreen} />
  </HomeStack.Navigator>
);

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="HomeStack" // Ändere den initialRouteName auf "HomeStack"
        screenOptions={({ route }) => ({
          tabBarActiveTintColor: 'blue',
          tabBarInactiveTintColor: 'gray',
          tabBarLabelStyle: {
            fontSize: 14,
          },
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'HomeStack') { // Ändere den Namen hier entsprechend
              iconName = 'home';
            } else if (route.name === 'Statistics') {
              iconName = 'chart-bar';
            } else if (route.name === 'Information') {
              iconName = 'info-circle';
            } else if (route.name === 'Settings') {
              iconName = 'cog';
            }

            return <FontAwesome5 name={iconName} color={color} size={size} />;
          },
        })}
      >
        <Tab.Screen
          name="Home" // Ändere den Namen hier entsprechend
          component={HomeStackScreen} // Verwende den HomeStackScreen als Komponente
          options={{ tabBarLabel: 'Home' }}
        />
        <Tab.Screen
          name="Statistics"
          component={StatisticsScreen}
          options={{ tabBarLabel: 'Statistiken' }}
        />
        <Tab.Screen
          name="Information"
          component={InformationScreen}
          options={{ tabBarLabel: 'Informationen' }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{ tabBarLabel: 'Einstellungen' }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

[PeterBaumler]

achso top danke würde mich über Hilfe freuen!

 

[madmax2010]

<HomeStack.Navigator> <HomeStack.Screen name="Home" component={HomeScreen} /> <HomeStack.Screen name="Selection" component={SelectionScreen} /> <HomeStack.Screen name="Quantity" component={QuantityScreen} /> </HomeStack.Navigator>

Die section erzeugtden header.

<HomeStack.Navigator>
    <HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
    />
    <HomeStack.Screen name="Selection" component={SelectionScreen} />
    <HomeStack.Screen name="Quantity" component={QuantityScreen} />
</HomeStack.Navigator>

Mit der Option options={{ headerShown: false }} solltest du ihn ausblenden können.
Jedenfalls, wenn ich die Doku richtig lese. Habe noch nie was it JS/React entwickelt.

 

[PeterBaumler]

Super hat direkt geklappt!! Danke! Hab noch eine Frage zu einem Balken den ich mit blauer Farbe füllen möchte. Aktuell färbt sich dieser von oben nach unten wenn ich auf die Höhe etwas drauf addiere.. Ich möchte aber dass der balken sich von unten nach oben füllt ich hab schon echt viel probiert aber bekomme
es einfach nicht hin..




Das ist der Code dazu...

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = ({ route }) => {

  const navigation = useNavigation();

  const [innerBarHeight, setInnerBarHeight] = useState(-38);



  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      paddingLeft: -10,
      marginRight: 200,
    },
    addButton: {
      position: 'absolute',
      backgroundColor: 'darkblue',
      padding: 10,
      borderRadius: 8,
      borderColor: 'black',
      top: 580,
      left: 110,
    },
    buttonText: {
      color: 'white',
      fontSize: 16,
    },
    progressBar: {
      position: 'absolute',
      marginRight: 1000,
      bottom: 170,
      height: 400,
      width: 80,
      borderColor: 'black',
      borderWidth: 1.5,
    },
    innerBar: {
      backgroundColor: 'darkblue',
      padding: 5,
      borderRadius: 5,
      borderColor: 'black',
      top: 0,
      left: -2,
      width: 80,
      position: 'absolute',
      transform: [{ rotate: '180deg' }],
    },
    text: {
      flex: 1,
      position: 'absolute',
      marginLeft: 92,
      marginTop: 510,
    },
    drinkButton: {
      width: 100,
      padding: 5,
      borderRadius: 5,
      backgroundColor: 'darkblue',
      alignItems: 'center',
      alignSelf: 'center',
      margin: 30,
      top: 82,
      left: 200,
    },
    drinkButtonText: {
      color: 'white',
      fontSize: 14,
    },
  });

  useEffect(() => {
    // Überprüfen, ob eine Änderung an der ausgewählten Menge vorliegt
    if (route.params && route.params.selectedQuantity) {
      // Aktualisieren Sie die Höhe der innerBar um 20px
      setInnerBarHeight(innerBarHeight + 50);
    }
  }, [route.params]);

  const navigateToSelection = () => {
    navigation.navigate('Selection');
  };

  const navigateToQuantity = () => {
    navigation.navigate('Quantity');
  };

  return (
    <View style={styles.container}>
      <View style={styles.progressBar}>
        <View style={[styles.innerBar, { height: innerBarHeight}]} />
      </View>
      <Text style={styles.text}>Trinkmenge</Text>
      <TouchableOpacity style={styles.addButton} onPress={navigateToSelection}>
        <Text style={styles.buttonText}>Getränk Hinzufügen</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.drinkButton} onPress={navigateToQuantity}>
        <Text style={styles.drinkButtonText}>Sprite</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.drinkButton} onPress={navigateToQuantity}>
        <Text style={styles.drinkButtonText}>Cola</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.drinkButton} onPress={navigateToQuantity}>
        <Text style={styles.drinkButtonText}>Fanta</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.drinkButton} onPress={navigateToQuantity}>
        <Text style={styles.drinkButtonText}>Apfelsaft</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.drinkButton} onPress={navigateToQuantity}>
        <Text style={styles.drinkButtonText}>Adelholzener</Text>
      </TouchableOpacity>
    </View>
  );
};

export default HomeScreen;