如何在 nativebase 中的所有屏幕上使用通用页脚

本文介绍了如何在 nativebase 中的所有屏幕上使用通用页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 react-native 的新手，我正在使用带有 React Navigation 的 nativebase UI这是我的主屏幕.

I am new to react-native and I am using nativebase UI with React NavigationThis a screen I have as home the main screen.

我正在使用 nativebase 组件 Container、Header、Footer.

I am using nativebase components Container, Header, Footer.

我的问题是如何创建一个可以在所有屏幕中导入的页脚或页眉文件?

所以我有一个通用的页脚模板，因为它在所有页面上都是一样的.

so I have one universal template for footer since it will be the same on all pages.

代码:

export default class Home extends React.Component {

  render() {
    return (
      <Container>
        <Header>
          <Left/>
          <Body>
            <Title>Home</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Text>We have { this.props.screenProps.currentFriends.length } friends!</Text>
          <Button
            block
            onPress={() =>
              this.props.navigation.navigate('Friends')
            }
          >
          <Text>Add some friends</Text>
          </Button>
        </Content>

        <Footer>
          <FooterTab>
            <Button vertical active>
              <Icon name="apps" />
              <Text>Home</Text>
            </Button>
            <Button vertical>
              <Icon name="person" />
              <Text>Friends</Text>
            </Button>
          </FooterTab>
        </Footer>

      </Container>
    );
  }

}

推荐答案

可以有两种类型的可重用组件

There can be two type of reusable component

有状态 - 其中可重用组件(页脚/页眉/等)将有自己的状态

Stateful - in which reusable component (footer/header/etc) will have their own state

export default class MyFooter extends React.Component{

  render() {
    return (
      <Left>
        <Icon name="person" type="EvilIcon" />
        <Text>{props.name}</Text>
      </Left>
     );
   }
}

import MyFooter from "./MyFooter";  // <-- Don't forget to import

export default class YourScreen extends React.Component {

 constructor(props) {
    super(props);
  }

  render() {
    return (
       <Container>
        <Header/>
        <Content />
        <MyFooter name="Click Me" /> // <--- this is custom component
     );
   }
}

无状态 - 它不会有任何状态，只是支持这两个组件驻留在同一个文件中 YourScreen.js

Stateless - where it will wont have any state, just props these both components resides in same file YourScreen.js

const MyFooter = props => {
  if (props.name) {
    return (
      <Left>
        <Icon name="person" type="EvilIcon" />
        <Text>{props.name}</Text>
      </Left>
    );
  } else {
    return null;
  }
};

export default class YourScreen extends React.Component {

  render() {
    return (
       <Container>
        <Header/>
        <Content />
        <MyFooter name="Click Me" /> // <--- this is custom component
     );
   }
}

这篇关于如何在 nativebase 中的所有屏幕上使用通用页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！