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

Question

在使用 native-base 的 React Native 应用程序的所有屏幕中包含页眉/页脚或其他组件的好方法是什么？

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

Answer 1

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

制作框架class/function（包含页眉、页脚或其他组件）并在您希望内容所在的部分呈现this.props.children。

export class Skeleton {
 ...

 render(){

  return (
    <Container>
     <Header />

     {this.props.children}

    </Container>
  );
 }
}

然后导入并使用

class NewScreen {
     ...

     render(){

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