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:
und meine App.js
Würde mich über Hilfe freuen!
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!