React Native 配置标题栏

2025年3月17日 | 阅读 3 分钟

屏幕组件的静态属性称为 navaigationOptions。它是一个对象或一个函数。它返回一个包含多个配置选项的对象。

标题栏的 Props

Props	描述
title	它设置活动屏幕的标题。
headerStyle	它为标题栏添加样式。
backgroundColor	它设置标题栏的背景颜色。
headerTintColor	它设置标题的颜色。
headerTitleStyle	它为屏幕的标题添加样式。
fontWeight	它设置标题的字体样式。

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

React Native 从一个屏幕移动到另一个屏幕示例 1

在此示例中，我们创建了两个名为“Home”和“Profile”的屏幕。使用“initialRouteName”属性将 Home 屏幕设置为第一个屏幕，将 Profile 屏幕设置为第二个屏幕。

App.js

import React from 'react';
import { View, Text, Button } 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>
                <Button
                    title="Go to Profile"
                    onPress={() => this.props.navigation.push('Profile')}
                />
            </View>
        );
    }
}
class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#0ff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    };
    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 />;
    }
}

输出

在标题中使用参数

要使用 params（参数）作为标题，我们需要将 navigationOptions 作为一个函数，该函数返回一个配置对象。在 navigationOptions 中使用 this.props。由于它是组件的静态属性，“this”不引用组件的实例，因此没有可用的 props。

将 navigationOptions 作为一个函数，该函数返回包含 {navigation, navigationOptions, screenProps } 的对象。 navigation 是作为 this.props.navigation 传递给屏幕 props 的对象。我们还可以使用 navigation.getParam 或 navigation.state.params 从 navigation 获取 params。

class ProfileScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('otherParam', 'A Param Header'),
        };
    };
}

活动屏幕的 navigationOtions 配置也可以从当前屏幕组件本身更新。

//inside render 
<Button
    title="Update the title"
    onPress={() => this.props.navigation.setParams({otherParam: 'Header Updated!'})}
/>

完整代码

在此示例中，我们创建了两个屏幕“Home”和“Profile”。 Profile 屏幕使用 params 设置其标题，如下所示：title: navigation.getParam('otherParam', 'A Param Header')

App.js

import React from 'react';
import { View, Text, Button } 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>
                <Button
                    title="Go to Profile"
                    onPress={() => this.props.navigation.push('Profile')}
                />
            </View>
        );
    }
}
class ProfileScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('otherParam', 'A Param Header'),
        };
    };

    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Profile Screen</Text>
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
                <Button
                    title="Update the title"
                    onPress={() => this.props.navigation.setParams({otherParam: 'Header Updated!'})}
                />
            </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 配置标题栏

标题栏的 Props

React Native 从一个屏幕移动到另一个屏幕示例 1

在标题中使用参数

完整代码

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native 配置标题栏

标题栏的 Props

React Native 从一个屏幕移动到另一个屏幕示例 1

在标题中使用参数

完整代码

相关帖子

在 Tab 导航底部添加图标

在屏幕之间传递值

创建 Material Bottom Tab Navigator

Drawer 导航

Tab 导航

创建 Material Top Tab Navigator

React Native 导航

在屏幕之间移动

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器