自訂UI Component

ReactNative 可自訂義UI Component供重覆使用

例如想要自訂一個Page的UI Component，NavBar和內容可讓使用者自訂：

'use strict';

import React, { Component } from 'react';
import { Container,Button,Content } from 'native-base';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

class Page extends Component {

 render() {
      return (
        <Container backgroundColor="#F0F0F0">
        {this.props.NavBar}
        <Content scrollEnabled={true} style={{marginTop: 64,}}>
        <KeyboardAwareScrollView>
           {this.props.children}
        </KeyboardAwareScrollView>
        </Content>
        </Container>   
    );
  }
}


module.exports = Page;

實際使用：

import Page from '../component/Page';
//...

<Page NavBar={<NavigationBar/>}>
<Text>Test Content</Text>    
</Page>

詳解：

Page裡有兩種自訂內容的方式

一.引用自訂組件

在Page中加上Navbar={},然後在裡面引用自訂的組件（如<NavigationBar/>）即可

<Page NavBar={<NavigationBar/>}>

在UI Component內打上{this.props.NavBar}即可接收自訂的組件

<Container backgroundColor="#F0F0F0">
{this.props.NavBar}
//...

二.引用內容

夾在<page>與</page>中間

<Page>
//內容
</Page>

在UI Component內以{this.props.children}接收即可

<Page>
<Text>Test Content</Text>    
</Page>