【react-native】react-nativeでボタンが複数存在するヘッダーを使う方法

お題

react-nativeでボタンが複数存在するヘッダーを使う方法

react-nativeでヘッダーの中のコンポーネントの位置を均等にするには

以下のようにスタイルを設定する必要があります。

<View style={styles.header}>
    <View style={styles.navBarStyle}>
        <AllowBack style={styles.backBtn}/>
        <Text style={styles.title}>Awesome App</Text>
        <Calender style={styles.backBtn}/>
    </View>
</View>

const styles = StyleSheet.create({
    header: {
      backgroundColor: '#fff',  
      height: 70,
    },
    navBarStyle: {
      flexDirection: 'row',
      paddingTop: 20,
    },
    backBtn: {
    },
    title: {
      flex: 1,
      color: '#000',
      fontWeight: 'bold',
      textAlign: 'center'
    },
  });

キモはflexDirectionとflexの二点。

上のコードではnavBarStyleは全てのコンポーネントを囲んでいます。何も設定しない場合は

この三つのコンポーネントが縦に表示されます。今回はヘッダー内に三つ収めたかったので

flexDirection:rowを使ってコンポーネントを横ならびにしました。

これで横並びにはできましたが、今度はコンポーネントが左隅によってしまいました。

左・真ん中・右と各々離れた状態のヘッダーを作りたかったので、今度はflexを使って

コンポーネントを均等に整列をさせました。

基本的なヘッダーの実装は以上になります。

戻りボタンがないヘッダーについてですが、こちらはAllowBackボタンを削除後titleセレクタに

paddingLeft: 50を追加してタイトルを真ん中に寄せてあげれば作ることができます。

react-native-router-fluxでもヘッダーは作れますが、設定できるプロパティが少なく

値を渡すのもめんどうなので自作でヘッダーを作った方が楽かなと個人的に感じました。

新しいライブラリでreact-navigationというものを使えば煩わしさは激減するので早くヘッダーを

作りたい場合はそちらを使うことをおすすめします。