screen组件的静态属性称为navaigationOptions。它是对象或函数。它返回一个包含几个配置选项的对象。
Props | Description |
---|---|
title | 设置标题。 |
headerStyle | 设置标题栏样式。 |
backgroundColor | 设置标题栏背景颜色。 |
headerTintColor | 设置屏幕标题颜色。 |
headerTitleStyle | 设置屏幕标题样式。 |
fontWeight | 设置标题的字体样式。 |
static navigationOptions = { title: 'HeaderTitle', headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#0ff', headerTitleStyle: { fontWeight: 'bold', }, };
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可用。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-configuring-header-bar.html
来源:LearnFk无涯教程网
将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 />; } }
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)