Методы перехода на другую страницу при нажатии кнопки в React Native

Чтобы перейти на другую страницу в React Native при нажатии кнопки, вы можете использовать несколько методов. Вот некоторые распространенные подходы:

  1. React Navigation: React Navigation — популярная библиотека для управления навигацией в React Native. Вы можете определить навигатор стека или навигатор вкладок и использовать свойство навигации для перехода на другой экран при нажатии кнопки. Вот пример:
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
const Stack = createStackNavigator();
function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Another Page"
      onPress={() => navigation.navigate('AnotherPage')}
    />
  );
}
function AnotherPage() {
  return (
    <View>
      <Text>This is another page</Text>
    </View>
  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="AnotherPage" component={AnotherPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;
  1. React Native Navigation: если вы предпочитаете другую библиотеку навигации, вы можете использовать React Native Navigation. Он обеспечивает встроенную навигацию и поддерживает платформы iOS и Android. Вы можете определить навигатор стека и использовать метод push для перехода на другой экран. Вот пример:
import { Navigation } from 'react-native-navigation';
function HomeScreen() {
  const goToAnotherPage = () => {
    Navigation.push(componentId, {
      component: {
        name: 'AnotherPage',
      },
    });
  };
  return (
    <Button
      title="Go to Another Page"
      onPress={goToAnotherPage}
    />
  );
}
function AnotherPage() {
  return (
    <View>
      <Text>This is another page</Text>
    </View>
  );
}
Navigation.registerComponent('HomeScreen', () => HomeScreen);
Navigation.registerComponent('AnotherPage', () => AnotherPage);
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'HomeScreen',
      },
    },
  });
});
  1. React Native Router Flux: React Native Router Flux — это еще одна навигационная библиотека, которая предлагает декларативный способ определения маршрутов и управления навигацией в React Native. Вы можете определить сцены и использовать компонент «Действия» для перехода к другой сцене. Вот пример:
import { Router, Scene, Actions } from 'react-native-router-flux';
function HomeScreen() {
  const goToAnotherPage = () => {
    Actions.anotherPage();
  };
  return (
    <Button
      title="Go to Another Page"
      onPress={goToAnotherPage}
    />
  );
}
function AnotherPage() {
  return (
    <View>
      <Text>This is another page</Text>
    </View>
  );
}
function App() {
  return (
    <Router>
      <Scene key="root">
        <Scene key="home" component={HomeScreen} title="Home" initial />
        <Scene key="anotherPage" component={AnotherPage} title="Another Page" />
      </Scene>
    </Router>
  );
}
export default App;

Это всего лишь несколько примеров того, как можно перейти на другую страницу в React Native при нажатии кнопки. У каждого метода есть свои преимущества, поэтому вы можете выбрать тот, который лучше всего соответствует требованиям вашего проекта.