关注我们

React Native - 标题栏属性

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

标题栏属性

Props	Description
title	设置标题。
headerStyle	设置标题栏样式。
backgroundColor	设置标题栏背景颜色。
headerTintColor	设置屏幕标题颜色。
headerTitleStyle	设置屏幕标题样式。
fontWeight	设置标题的字体样式。

复制代码

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

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

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

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"的静态属性，所以它不是引用componen的实例，因此没有props可用。

将navigationOptions用作返回包含{navigation，navigationOptions，screenProps}的对象的函数。导航是作为this.props.navigation传递到屏幕prop的对象。我们还可以使用navigation.getParam或navigation.state.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屏幕使用以下参数将其标题设置为: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 />;
    }
}