defaultProps で React.Component の Props のデフォルト値を設定

React Native

defaultProps で React.Component の Props のデフォルト値を設定できるようです

ドキュメント

環境

  • react: 16.6.1
  • react-natibve: 0.57.7
  • native-base: 2.12.0

サンプル

import * as React  from 'react';
import {Body, Header, Left, Right, Title} from "native-base";

export interface Props {
  title: string
}

export interface State {
}

export default class SampleHeader extends React.Component<Props, State> {

  // defaultProps で React.Component の Props のデフォルト値を設定
  public static defaultProps: Props = {
    title: 'サンプルページ',
  };
  
  render() {
    return (
      <Header>
        <Left/>
        <Body>
          <Title>
            {this.props.title}
          </Title>
        </Body>
        <Right/>
      </Header>
    )
  }
}
import SampleHeader from "/path/to/SampleHeader";

export default class SampleScreen extends React.Component<Props, State> {

  render() {
    return (
      <Container>

        {/* titleを省略 => 'サンプルページ' というヘッダーを表示 */}
        <SampleHeader/>

      </Container>
    )
  }
import SampleHeader from "/path/to/SampleHeader";

export default class SampleScreen extends React.Component<Props, State> {

  render() {
    return (
      <Container>

        {/* 指定を指定 => '任意のタイトル' というヘッダーを表示 */}
        <SampleHeader title={'任意のタイトル'}/>

      </Container>
    )
  }