react-navigation(5.x)新版本使用（一）之利用class代替function实现页面跳转

写作时间：2020/4/9
React-Native版本：0.62
React-Navigation版本：5.X

注：在对文章涉及的代码进行测试之前，请先确认你已经成功安装如下内容

// react-navigation(5.x)
npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs

新版navigation改动较大，需要重新进行梳理，想做个系列，本文主要针对官网提供的页面跳转案例进行修改，将各个页面分别进行封装，首先请先看一下官方给出的代码（这里我将原RN项目中的App.js的内容全部删去，换成如下代码）

// App.js

import * as React from 'react';
import {Button, View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

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

function DetailsScreen({navigation}) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Details Screen</Text>
            <Button title="Go to Details... again" onPress={() => navigation.push('Details')} />
            <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
            <Button title="Go back" onPress={() => navigation.goBack()} />
            <Button title="Go back to first screen in stack" onPress={() => navigation.popToTop()} />
        </View>
    );
}

const Stack = createStackNavigator();

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Details" component={DetailsScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

最终展示出来的页面如下（共有两个页面）

上面这个是首页

上面这个是详情页

通过观察不难发现，所有界面都以function进行定义，现在我利用class将各个页面以组件形式进行封装，代替原有的function，修改之后的项目结构如下图所示

可以看到，项目中除了原有的App.js以外，还多了HomeScreen.js和DetailsScreen.js两个文件，现将这些文件中的代码展示如下

// App.js
import React from 'react';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

export default class App extends React.Component {
    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen name="Home" component={HomeScreen} />
                    <Stack.Screen name="Details" component={DetailsScreen} />
                </Stack.Navigator>
            </NavigationContainer>
        );
    }
}

// HomeScreen.js
import React from 'react';
import {View, Text, Button} from 'react-native';

export default 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>
        );
    }
}

// DetailsScreen.js
import React from 'react';
import {View, Text, Button} from 'react-native';

export default 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()} />
                <Button title="Go back to first screen in stack" onPress={() => this.props.navigation.popToTop()} />
            </View>
        );
    }
}

最终执行的效果其实是一样的，但是由于进行了封装，会为后续的开发提供便利，整个项目结构也会更加清晰。