react nativeで要素を中央寄せする方法

Question

react nativeでの中央寄せについて質問させてください。

Viewの中に画像と文字列を横並びに配置し、Viewの中央に寄せたいです。
横並びにしたいので、以下の通りViewのstyleでflexDirection:rowとした際、画像と文字列が左寄せとなってしまいます。

<View style={{
  flex:1, 
  flexDirection: 'row',
}}>
  <Image source={image}/>
  <Text>テキスト</Text>
<View>

どうすれば画像と文字列を横並びで中央寄せにできますでしょうか。

お手数ですが、お力添えしていただけますと大変助かります。
よろしくお願いいたします。

Answer 1

Viewの中に画像と文字列を横並びに配置し、Viewの中央に寄せたいです。

横並びにしたいので、以下の通りViewのstyleでflexDirection:rowとした際、画像と文字列が左寄せとなってしまいます。

提示いただいたコードはそもそも動作していますか？

• styleがObject型指定になっていない
• flexDirectionの指定が文字列になっていない

このあたりが気になりますが以下のように指定すれば中央寄せになるのではないでしょうか？

<View style={{
  flex:1, 
  flexDirection: 'row',
  justifyContent : 'center',
  alignItems : 'center'
}} >
  <Image source={image}/>
  <Text>テキスト</Text>
<View>

Comments

[tsurezure1]

ありがとうございます。
ご教授いただいたstyleの指定方法でうまくいきました。

ご指摘していただいた内容ですが、サンプルとしてここに記載したのみだったので正しくない内容となってしまいました。
ご迷惑をおかけしまして申し訳ありません。
本文中のコードは修正いたします。