Navigation in Javascript

P

PeterBaumler

Neues Mitglied
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:

InformationScreen: 
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 meine App.js

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';

// 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;

Würde mich über Hilfe freuen!
 
Habe leider keine Ahnung von React Native, aber ich würde mich an deiner Stelle zuerst fragen, ob denn überhaupt deine Funktion navigateToNatriumScreen ordnungsgemäß aufgerufen wird.

Wenn dem so ist, würde ich schauen, ob du den Natrium-Screen für die Navigation richtig referenzierst, der Screen tatsächlich existiert und richtig registriert ist, usw.

In App.js sieht man z.B. einen Import des NatriumScreen's, aber keine entsprechende Nutzung.
 
Zurück
Oben Unten