Navigation in JavaScript (React Native)

[PeterBaumler]

Hallo ich wollte fragen warum die Navigation bei dem klick auf den Natrium-Button auf den NatriumScreen nicht funktioniert?

Hier einmal mein InformationScreen auf dem der Button ist:

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

const InformationScreen = () => {
    const navigation = useNavigation();

    const navigateToNatriumScreen = () => {
        navigation.navigate('Natrium'); // Hier wird zum 'Natrium' Screen gewechselt.
    };

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.button} onPress={navigateToNatriumScreen}>
                <Text style={styles.buttonText}>Natrium</Text>
            </TouchableOpacity>
            {/* Weitere Inhalte des InformationScreen */}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    button: {
        backgroundColor: 'blue',
        padding: 20,
        margin: 10,
        borderRadius: 5,
        width: 200,
        alignItems: 'center',
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
    },
});

export default InformationScreen;

und das ist meine App.js bei der ich wahrscheinlich etwas ändern muss damit es funktioniert

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';
import NatriumScreen from './Screens/NatriumScreen';

// Bottom und Stacknavigator
const Tab = createBottomTabNavigator();
const HomeStack = createStackNavigator();

//Stack Navigation
const HomeStackScreen = () => (
    <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>
);

// Navigationscontainer
const App = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator
                initialRouteName="Home"
                screenOptions={({ route }) => ({
                    tabBarActiveTintColor: 'darkblue',
                    tabBarInactiveTintColor: 'gray',
                    tabBarLabelStyle: {
                        fontSize: 14,
                    },
                    tabBarIcon: ({ color, size }) => {
                        let iconName;

                        if (route.name === 'Home') {
                            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" component={HomeStackScreen} 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;

ich würde mich über Hilfe freuen!

 

[madmax2010]

was passiert denn wenn du drauf klickst? waswird in den entwicklertools gelogged?
ich mache nichts mit JS und kann es auch nicht, aber:

    const navigateToNatriumScreen = () => {
        navigation.navigate('Natrium'); // Hier wird zum 'Natrium' Screen gewechselt.
    };

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.button} onPress={navigateToNatriumScreen}>
                <Text style={styles.buttonText}>Natrium</Text>
            </TouchableOpacity>
            {/* Weitere Inhalte des InformationScreen */}
        </View>
    );

.
.
.
import NatriumScreen from './Screens/NatriumScreen';

sehe nicht, dass du da NatriumScreen direkt aufrufst.

 

[PeterBaumler]

Das hier:

 

[pseudopseudonym]

Nagel mich nicht drauf fest, ich habe seit Jahren kein React mehr angefasst und React Native noch nie.
Wenn ich jetzt aber nach
Natrium
suche (wegen navigation.navigate('Natrium');), finde ich diesen String in deinem beiden Codeschnippseln an keiner Stelle. Kann es sein, dass dir einfach eine Route fehlt?

Edit: Das passt auch zu dem, was du gerade gepostet hast.

 

[PeterBaumler]

Danke für den Tipp ich habe schon mal ein bisschen was hinbekommen die Navigation funktioniert jetzt aber es gibt irgendwie doppelte Überschriften (siehe Bild)

hab noch ein paar Button hinzugefügt und mein Code sieht jetzt so aus:

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';
import NatriumScreen from './Screens/NatriumScreen';
import BorScreen from './Screens/BorScreen';
import MagnesiumScreen from './Screens/MagnesiumScreen';
import KaliumScreen from './Screens/KaliumScreen';
import CalciumScreen from './Screens/CalciumScreen';
import LithiumScreen from './Screens/LithiumScreen';




// Bottom und Stacknavigator
const Tab = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const InformationStack = createStackNavigator();


//Stack Navigation
const HomeStackScreen = () => (
  <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>
);

const InformationStackScreen = () => (
  <InformationStack.Navigator>
    <InformationStack.Screen name="Information" component={InformationScreen} options={{ headerShown: false }} />
    <InformationStack.Screen name="Natrium" component={NatriumScreen} />
    <InformationStack.Screen name="Bor" component={BorScreen} />
    <InformationStack.Screen name="Lithium" component={LithiumScreen} />
    <InformationStack.Screen name="Magnesium" component={MagnesiumScreen} />
    <InformationStack.Screen name="Kalium" component={KaliumScreen} />
    <InformationStack.Screen name="Calcium" component={CalciumScreen} />
  </InformationStack.Navigator>
);



// Navigationscontainer
const App = () => {
  return (
    <NavigationContainer>
      
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={({ route }) => ({
          tabBarActiveTintColor: 'darkblue',
          tabBarInactiveTintColor: 'gray',
          tabBarLabelStyle: {
            fontSize: 14,
          },
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              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"
          component={HomeStackScreen}
          options={{ tabBarLabel: 'Home' }}
        />
        <Tab.Screen
          name="Statistics"
          component={StatisticsScreen}
          options={{ tabBarLabel: 'Statistiken' }}
        />
        <Tab.Screen
          name="Information"
          component={InformationStackScreen}
          options={{ tabBarLabel: 'Informationen' }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{ tabBarLabel: 'Einstellungen' }}
        />
      

      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

InfoScreen:

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

const InformationScreen = () => {
  const navigation = useNavigation();

  const navigateToScreen = (screenName) => {
    navigation.navigate(screenName);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigateToScreen('Natrium')}
      >
        <Text style={styles.buttonText}>Natrium</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() => navigateToScreen('Bor')}
      >
        <Text style={styles.buttonText}>Bor</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() => navigateToScreen('Lithium')}
      >
        <Text style={styles.buttonText}>Lithium</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() => navigateToScreen('Magnesium')}
      >
        <Text style={styles.buttonText}>Magnesium</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() => navigateToScreen('Kalium')}
      >
        <Text style={styles.buttonText}>Kalium</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() => navigateToScreen('Calcium')}
      >
        <Text style={styles.buttonText}>Calcium</Text>
      </TouchableOpacity>
      
      {/* Weitere Inhalte des InformationScreen */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: 'blue',
    padding: 20,
    margin: 10,
    borderRadius: 5,
    width: 200,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default InformationScreen;

Ich würde wenn ich auf einen der Screens wechsel nur das Spurenelement oben angezeigt bekommen, nicht Information und darunter das Spurenelement hat da vielleicht noch jemand eine Idee?

 

[pseudopseudonym]

Das wird an der Schachtelung liegen. Du rendert den Natrium-Screen in den Info-Screen rein, beide jeweils mit Überschrift.

 

[madmax2010]

Das mit den Überschriften sieht nach dem was ich in den anderen thread geschrieben hatte aus

 

[PeterBaumler]

Ich will ja das beide eine Überschrift haben, aber ich möchte, dass wenn ich auf einen Screen klicke die Überschrift Information verschwindet hast du da vielleicht eine Idee wie ich das machen kann?

Und ja das Problem ist, dass es jetzt unterschiedliche Überschriften sind und ich nicht einfach eine ausblenden kann, weil dann nur Information angezeigt wird @madmax2010 :/

 

[pseudopseudonym]

Wie du's besser machst, kann ich dir ausm Stand vom Handy aus nicht sagen. In der app.js fällt in Zeile 94 allerdings auf, dass du den Information-Navigator in den Home-Navigator einbettest. Das musst du irgendwie anders machen.

 

[PeterBaumler]

mhhh ok ich probiers nochmal aber danke erstmal und wenn noch jemand Vorschläge hat immer her damit