四、react-Navigation路由及页面跳转

1.创建堆栈导航器

app.js

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            </View>
        );
    }
}
const AppNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen,
    },
});
export default createAppContainer(AppNavigator);

如果运行此代码，您将看到一个带有空导航栏和包含HomeScreen组件的灰色内容区域的屏幕。您在导航栏和内容区域看到的样式是堆栈导航器的默认配置，我们将学习如何稍后配置它们。

在React Native中，从中导出的组件App.js是应用程序的入口点（或根组件） - 它是每个其他组件从中下降的组件。在应用程序的根目录中对组件进行更多控制通常比导出结果更有用createAppContainer，因此让我们导出一个只渲染AppNavigator堆栈导航器的组件。

const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

鉴于我们所拥有的唯一路由配置Home是屏幕组件，我们不需要使用{ screen: HomeScreen }配置格式，我们可以直接使用屏幕组件。

const AppNavigator = createStackNavigator({
    Home: HomeScreen,
});

现在我们的堆栈有两条路线，一条Home路线和一条Details路线。的Home路线对应于HomeScreen分量和Details路线对应于所述DetailsScreen部件。堆栈的初始路由是Home路由。所以initialRouteName是配置初始路由的属性

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            </View>
        );
    }
}
class DetailsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
            </View>
        );
    }
}
const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen
    },
    {
        initialRouteName: 'Details'
    }
);
export default createAppContainer(AppNavigator);

2.路由跳转

做好了两个路由我们现在要实现的就是两个路由之间的跳转
app.js

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
            title="Go to Details"
            onPress={() => this.props.navigation.navigate('Details')}
    />
        </View>
    );
}
}

如果这是一个Web浏览器，我们可以写这样的东西：

<a href="details.html">Go to Details</a>

另一种写这个的方法是：

<a onClick={() => { document.location.href = "details.html"; }}>Go to Details</a>

我们会做类似于后者的事情，但是document我们不会使用全局，而是使用navigation传递给屏幕组件的prop。
在路由Home中我们添加一个按钮用于跳转到Details视图

<Button
        title="Go to Details"
        onPress={() => this.props.navigation.navigate('Details')}

如果我们this.props.navigation.navigate使用我们尚未在堆栈导航器上定义的路由名称调用，则不会发生任何事情。换句话说，我们只能导航到我们的堆栈导航器上定义的路线 - 我们无法导航到任意组件。
我们假设我们实际上想要添加另一个细节屏幕。这种情况在您向每条路线传递一些独特数据的情况下非常常见。为此，我们可以navigate改为push。这允许我们表达添加另一个路线的意图，而不管现有的导航历史记录。我们可以在任意导航掉任意组件！
效果如下

堆栈导航器提供的标题将在可以从活动屏幕返回时自动包含后退按钮（如果导航堆栈中只有一个屏幕，则没有任何内容可以返回，因此没有返回键）。有时您希望能够以编程方式触发此行为，并为此可以使用

this.props.navigation.goBack();

class DetailsScreen extends React.Component {
    render() {
        return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
            <Button
                title="Go to Details… again"
                onPress={() => this.props.navigation.push('Details')}
            />
            <Button
                title="Go to Home"
                onPress={() => this.props.navigation.navigate('Home')}
            />
            <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
                </View>
        );
}}