Чтобы перейти на другую страницу в React Native при нажатии кнопки, вы можете использовать несколько методов. Вот некоторые распространенные подходы:
- 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;
- 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',
},
},
});
});
- 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 при нажатии кнопки. У каждого метода есть свои преимущества, поэтому вы можете выбрать тот, который лучше всего соответствует требованиям вашего проекта.