react-native从入门到精通搭建app(六) 一一 头部标题栏设置
文章 2091 0 0 0
发布时间:2019年09月20日

五、react-native头部标题栏设置

1.设置标题

屏幕组件可以具有静态属性navigationOptions,该属性称为对象或返回包含各种配置选项的对象的函数。我们用于标题标题的那个是title,如以下示例所示。

HomeScreen主组件

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
    };
/ render function, etc /
}

DetailsScreen详情组件

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };
  / render function, etc /
}

navigation.getParamnavigation.state.params后者我们自行查看学习,我们教程前者介绍,

为了在标题中使用params,我们需要创建navigationOptions一个返回配置对象的函数。尝试在this.props内部使用可能很诱人navigationOptions,但因为它是组件的静态属性,this所以不引用组件的实例,因此没有可用的道具。相反,如果我们创建navigationOptions一个函数,那么React Navigation将使用包含的对象调用它{ navigation, navigationOptions, screenProps }- 在这种情况下,我们关心的是navigation,这是传递给屏幕道具的相同对象this.props.navigation通过navigation.getParam获取参数修改title。

DetailsScreen详情组件

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };
  / render function, etc /
}

在上一篇我们也介绍了动态修改参数内容,更新navigationOptions与setParams通过点击按钮修改设置的标题

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

2.设置标题样式

有自定义页眉的样式时,使用三个关键特性:headerStyleheaderTintColor,和headerTitleStyle

headerStyle:将应用于View包装标头的样式对象。如果你设置backgroundColor它,那将是你的标题的颜色。

headerTintColor:后退按钮和标题都使用此属性作为其颜色。在下面的示例中,我们将色调颜色设置为白色(#fff),因此后退按钮和标题标题将为白色。

headerTitleStyle:如果我们想自定义fontFamilyfontWeight等Text为标题样式属性,我们可以用它来做到这一点。

HomeScreen主组件

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };
  / render function, etc /
}

效果如下

react-native从入门到精通搭建app(六) 一一 头部标题栏设置

3.多屏公用样式

通常希望在许多屏幕上以类似的方式配置标头。

DetailsScreen详情组件

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
    };
}
const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen,
    },
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    });

效果如下

react-native从入门到精通搭建app(六) 一一 头部标题栏设置

4.动态设置标题样式

屏幕组件定义与其父堆栈导航的默认导航选项合并到一起,达到动态修改继承父页面标题样式

class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation, navigationOptions }) => {
        const { params } = navigation.state;
        return {
            title: params ? params.otherParam : 'A Nested Details Screen',
            headerStyle: {
                backgroundColor: navigationOptions.headerTintColor,
            },
            headerTintColor: navigationOptions.headerStyle.backgroundColor,
        };
    };

效果如图

react-native从入门到精通搭建app(六) 一一 头部标题栏设置

5.自定义组件替换标题样式

有时您需要更多控制而不仅仅是更改标题的文本和样式 - 例如,您可能希望渲染图像代替标题,或将标题设置为按钮。在这些情况下,您可以完全覆盖用于标题的组件并提供您自己的组件。
要替换的标题组件

LogoTitle组件

class LogoTitle extends React.Component {
    render() {
        return (
            <Image
            source={require('./src/assets/title.png')}
    style={{ width: '100%', height: '100%' }}
    />
    );
}
}

HomeScreen主组件

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };
  / render function, etc /
}

效果如下:

react-native从入门到精通搭建app(六) 一一 头部标题栏设置

评论专区
Q群
Q群
Q群
反馈
纠错