如何将通用页脚用于本地基础中的所有屏幕

我是React-Native的新手这是我作为主屏幕的屏幕。

我正在使用本地基础组件容器， header ， footer 。

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

所以我有一个适用于页脚的通用模板，因为它在所有页面上都相同。

代码：

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>
    );
  }
}

可以有两种可重复使用的组件

状态 - 可重复使用的组件（页脚/标头/等）将具有自己的状态

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

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
     );
   }
}

相关内容

最新更新

热门标签：