无涯教程网

关注我们

React Native - 导航

React Native - 导航

React Native Navigation用于管理演示文稿以及在多个屏幕之间切换。内置在移动应用程序中的导航有两种。这些是堆栈导航和选项卡式导航模式。

安装导航

React Navigation是从React Native社区生成的，该社区提供了用JavaScript编写的导航解决方案。

创建React Native项目并安装所需的包和依赖项。

使用以下任一命令在React Native项目中安装react-navigation软件包。

yarn add react-navigation
# or with npm
# npm install --save react-navigation

成功执行上述命令后，它会在package.json文件中添加"^ 3.3.0"。

之后，安装react-native-gesture-handler软件包。

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

现在，使用命令将所有本机依赖项链接在一起:

react-native link react-native-gesture-handler

要完成Android版"react-native-gesture-handler"的安装，请在MainActivity.java中进行以下修改。

projectDirectory/Android/app/src/main/java/com/project/MainActivity.java

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

. . .

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
            return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
    };
}

创建导航

为了创建堆栈导航，我们导入react-navigation库的createStackNavigator和createAppContainer函数

App.js

import React from "react";
import {Button, View, Text } 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>
            </View>
        );
    }
}

const AppNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen
    }
});
export default createAppContainer(AppNavigator);

createStackNavigator是一个接受路由配置对象和选项对象的函数。它返回React组件。

链接：https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-navigation.html

来源：LearnFk无涯教程网

MainActivity.java

package com.naviexe;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "naviExe";
    }
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

当我们运行上面的代码时，我们看到一个包含HomeScreen组件的空白导航栏。

输出:

React Native Navigation

路由配置

当我们只有一个屏幕作为主屏幕组件的路由时，我们不需要使用{screen:HomeScreen}，我们可以直接使用主组件。

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

添加样式

    static navigationOptions = {
        title: 'Home',
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#0ff',
        headerTitleStyle: {
           fontWeight: 'bold',
        },
    };

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
        headerStyle: {
            backgroundColor: '#f4511e',
        },
    //headerTintColor: '#0ff',
        headerTitleStyle: {
           fontWeight: 'bold',
        },
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}
const AppNavigator = createStackNavigator({
    Home: HomeScreen
});

export default createAppContainer(AppNavigator);

添加页面

在App.js文件中创建另一个类(ProfileScreen)，以将第二条路线页面添加到堆栈导航器。

class ProfileScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Details Screen</Text>
            </View>
        );
    }
}

const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Profile: ProfileScreen
    },
    {
        initialRouteName: "Home"
    }
);

initialRouteName选项对象在堆栈导航中指定初始路由。

完整代码:

App.js

import React from 'react';
import { View, Text } 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>
            </View>
        );
    }
}
class ProfileScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Details Screen</Text>
            </View>
        );
    }
}

const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Profile: ProfileScreen
    },
    {
        initialRouteName: "Home"
    }
);

export default createAppContainer(AppNavigator);

输出:

React Native Navigation

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

技术教程推荐

性能测试实战30讲 -〔高楼〕

罗剑锋的C++实战笔记 -〔罗剑锋〕

Web安全攻防实战 -〔王昊天〕

说透5G -〔杨四昌〕

攻克视频技术 -〔李江〕

搞定音频技术 -〔冯建元〕

现代C++20实战高手课 -〔卢誉声〕

AI绘画核心技术与实战 -〔南柯〕

徐昊 · AI 时代的软件工程 -〔徐昊〕

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