React Native - 导航跳转

React Native - 导航跳转 首页 / React Native入门教程 / React Native - 导航跳转

在本节中,我们将讨论如何从一个页面导航到另一个页面,然后返回到初始页面。在导航的上一部分中,我们创建了带有两个页面(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 />;
    }
}

输出:

React Native Moving Between ScreensReact Native Moving Between Screens
  • this.props.navigation   -  导航prop通过堆栈导航中的每个屏幕组件传递。
  • navigate('Profile')          -  导航到已定义的路由名称地址。

导航到路由页面

将导航从"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 />;
    }
}

输出:

React Native Moving Between ScreensReact Native Moving Between Screens

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

左耳听风 -〔陈皓〕

硅谷产品实战36讲 -〔曲晓音〕

ZooKeeper实战与源码剖析 -〔么敬国〕

Vim 实用技巧必知必会 -〔吴咏炜〕

重学线性代数 -〔朱维刚〕

体验设计案例课 -〔炒炒〕

深入剖析Java新特性 -〔范学雷〕

大厂设计进阶实战课 -〔小乔〕

手把手带你搭建推荐系统 -〔黄鸿波〕

好记忆不如烂笔头。留下您的足迹吧 :)