React NativeのUIコンポーネント「NativeBase」のButton UIが横幅いっぱいにならないようにする方法

React Nativeの開発で、デザインがよほどオリジナルではない限りUIコンポーネント「NativeBase」を使うケースは少なくないと思う。各プラットフォームのスタイル適用を省略できることがメリットだからだ。

なかでもButton APIは重宝されているのではないだろうか。そもそもButton APIはReact Native標準コンポーネントのView APIとTouchableOpacity APIをラップしたもので、タップすると半透明になり、Material Design風にスタイルされている。

これを独自コンポーネントで定義するのは、なかなか面倒で骨が折れる。よほどオリジナルなデザインでない限りは、使い勝手のよいコンポーネントAPIだ。

さてNativeBaseのButton APIを考えなしにView APIなどのレイアウトコンポーネント内に配置すると横幅いっぱいに表示される問題に遭遇する。fullプロパティを付与していないにも関わらずだ。

このエントリーでは、Buttonが横幅いっぱいにならないようにする方法を紹介したい。

export default class App extends React.Component {
  render() {
    return (
      <Container>
        <Content style={{alignItems:'flex-start'}}> 
          <Button><Text>クリック</Text></Button>
        </Content> 
      </Container>
    );
  }
}

まずJSX内に見えるContainerとContentタグもNativeBaseのコンポーネントAPIだ。いずれもReact Native標準コンポーネントのView APIが基になっている。

重要なところは、Contentタグのstyle={{alignItems:'flex-start'}}だ。CSSのalign-itemsプロパティにより左寄せにしている。そもそもalign-itemsは、縦方向に関わるものなのだが、View APIの主軸は縦方向だ。つまりflex-direction:columnのような状態になっている。

主軸が縦方向(column)の場合は、align-itemsは横方向に関わる指定に変わるため、flex-startで左寄せになったというわけだ。

これはContainerやContent以外のレイアウトコンポーネントであっても同様である。たとえばViewタグに内包されるような場合は、Viewタグにstyle属性を付与すればよい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。