Question

想象一下，我有一个StackNavigator应用程序，当用户点击第1页上的内容时，他/她被重定向到第2页（使用Stack Navigator）等。我想要一个应用栏，根据应用程序是全局的，也就是说，每个页面（第1页，第2页等）都应显示此应用栏。这就是app栏的意思。

[！[在此处输入图像说明] [1]] [1]

我在文档中找到了一个如下所示的组件：

<ToolbarAndroid
      logo={require('./app_logo.png')}
      title="AwesomeApp"
      actions={[{title: 'Settings', icon: require('./icon_settings.png'), show: 'always'}]}
      onActionSelected={this.onActionSelected} />

这是否意味着我需要将每个页面的内部分别放在内？（第1页，第2页）。就像我说的那样，我只需要一个工具栏用于整个应用程序。

有人能告诉我一些代码示例如何实现这个目标吗？

Answer 1

您可以创建一个名为MyHeader.js的单独组件，然后导入到要使用它的文件中。给道具定制它。使用NativeBase的示例：

MyHeader.js

import React from 'react';
import { Text, View, Image } from 'react-native';
import { Container, Header, Left, Body, Right, Title, Button, Icon } from 'native-base';
import styles from '../assets/style';

export default class MyHeader extends React.Component {
render() {
    const goBack = this.props.goBackProp;
    return (
        <Container>
          <Header>
            <Left>
              <Button
                transparent
                onPress={() => goBack()}
              >
                <Icon name="ios-arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title> {this.props.title} </Title>
            </Body>
            <Right />
          </Header>
        </Container>
    );
  }
}

现在我可以将它导入到这样的任何组件中：

import MyHeader from '../components/MyHeader';

export default class BlogScreen extends React.Component {
  render() {
    const {goBack} = this.props.navigation;
    return (
          <MyHeader goBackProp={goBack} title={'Blog'}/>
    );

  }
}

为Android创建应用栏

1 个答案: