React native / native base：如何在所有屏幕中包含骨架（页眉/页脚）？

Question

在使用本机库的react本机应用程序的所有屏幕中包含页眉/页脚或其他组件的好方法是什么？

主要是为了避免代码重复并使重构更容易。

Answer 1

您可以使用Composition概念。 https://reactjs.org/docs/composition-vs-inheritance.html

创建一个骨架类/函数（包含页眉，页脚或其他组件）并让它在您想要内容的部分中呈现this.props.children。

export class Skeleton {
 ...

 render(){

  return (
    <Container>
     <Header />

     {this.props.children}

    </Container>
  );
 }
}

然后导入并使用

class NewScreen {
     ...

     render(){

      return (
       <Skeleton> 
        <View>...</View>
       </Skeleton>
      );
     }
}