Блог

Я понимаю, что это распространенный вопрос, но, похоже, я не могу заставить это работать.

Я хочу просто иметь возможность переходить на другой экран одним нажатием кнопки. Я видел много людей, использующих эти стеки и устанавливающих множество зависимостей. Во-первых, когда я устанавливаю эти зависимости, я сталкиваюсь со многими ошибками, а во-вторых, мой App.js file в настоящее время возвращает один из моих существующих экранов. И я не могу найти пример, когда они возвращают экран в App.js функционируют, когда они используют эти стеки.

Если бы кто-нибудь мог показать мне лучший способ реализовать эту функцию или связать лучший пример, я был бы очень признателен.

Спасибо

Ознакомьтесь с руководством по запуску React Navigator здесь

если вы хотите перемещаться только на 2 экранах, вы можете использовать условный рендеринг в своем App.js вот так : … возврат (someCondition? Component1: Component2; )

но я лично предлагаю вам использовать react navigation, поскольку это правильный способ навигации между экранами

Предполагая, что вы собираетесь использовать react navigation.Ваш App.js функция может быть следующей:

 import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function App({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home</Text>
      <Button
        title="Another Screen"
        onPress={() => navigation.navigate('Another')}
      />
    </View>
  );
}
  

Приведенная выше функция приведет к переходу на другой экран с помощью onClick на кнопке.

Вот простой пример:

 import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Notifications"
        onPress={() => navigation.navigate('Notifications')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
} 
  

Пример в Expo