在本节中,我们将讨论如何从一个页面导航到另一个页面,然后返回到初始页面。在导航的上一部分中,我们创建了带有两个页面(Home和Profile)的堆栈导航。使用导航prop执行从一个页面移动到另一个页面,该prop向下传递我们的页面组件。
<a href="profiles.html">Go to Profile</a>
写这将是:
<a onClick={() => { document.location.href = "profile.html"; }}>Go to Profile</a>
从一个页面导航到另一个页面以不同的方式执行:
<Button title="Go to URL" onPress={() => this.props.navigation.navigate('url')} />
App.js
在"HomeScreen"中添加一个Button组件,并执行一个onPress {}动作,该动作调用this.props.navigation.navigate('Profile')函数。单击“Button"组件,将屏幕移至"ProfileScreen"布局。
import React from 'react'; import { View, Text, Button } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Profile" onPress={() => this.props.navigation.navigate('Profile')} /> </View> ); } } class ProfileScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Text>Profile Screen</Text> </View> ); } } const AppNavigator = createStackNavigator( { Home: HomeScreen, Profile: ProfileScreen }, { initialRouteName: "Home" } ); const AppContainer = createAppContainer(AppNavigator); export default class App extends React.Component { render() { return <AppContainer />; } }
输出:
将导航从"Profilescreen"添加到"Profile"URL不会进行任何更改,因为我们已经在Profile Route。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-moving-between-screens.html
来源:LearnFk无涯教程网
class ProfileScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Text>Profile Screen</Text> <Button title="Go to Profile" onPress={() => this.props.navigation.navigate('Profile')} /> </View> ); } }
我们将导航更改为推送。导航推送表示忽视现有导航历史记录而添加另一条路由。
<Button title="Go to Profile" onPress={() => this.props.navigation.push('Profile')} />
每次按下按钮时,调用push方法并向导航堆栈添加一条新路由。
当有可能从当前屏幕返回时,堆栈导航器的标题会自动包含一个后退按钮。单屏堆栈导航不提供后退按钮,因为我们无法返回任何内容。
有时,我们以编程方式实现后退行为,因此可以将其称为this.props.navigation.goBack()。
App.js
import React from 'react'; import { View, Text, Button } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Profile" onPress={() => this.props.navigation.push('Profile')} /> </View> ); } } class ProfileScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Text>Profile Screen</Text> <Button title="Go to Profile... again" onPress={() => this.props.navigation.push('Profile')} /> <Button title="Go to Home" onPress={() => this.props.navigation.navigate('Home')} /> <Button title="Go back" onPress={() => this.props.navigation.goBack()} /> </View> ); } } const AppNavigator = createStackNavigator( { Home: HomeScreen, Profile: ProfileScreen }, { initialRouteName: "Home" } ); const AppContainer = createAppContainer(AppNavigator); export default class App extends React.Component { render() { return <AppContainer />; } }
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)