フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【React Native】よく使うスタイル実装まとめ【StyleSheet】

React Nativeでどう実装するんだっけ?と、よく検索する内容とその結果をまとめました。
編集リクエストウェルカムです。

配置

上下中央

1.alignItems:

<View style=>
    <Text>A</Text>
    <Text>B</Text>
  </View>

image.png

2. flexDirection: column:

  <View style=>
    <Text>A</Text>
    <Text>B</Text>
  </View>

image.png

左右中央

  <View style=>
    <Text>A</Text>
    <Text>B</Text>
  </View>

image.png

左右中央/上下中央

  <View style=>
    <Text>A</Text>
    <Text>B</Text>
  </View>

image.png

右揃え

How can you float: right in React Native? – Stack Overflow

StackOverFlowでいくつかのやりかたが載っていたので、記載させていただきます。
スクショも確認のためとっています。(結局全部同じですが)

1. textAlign: ‘right’をTextにあてる

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

image.png

2. alignSelf: ‘flex-end’をTextに:

  <View>
    <Text style={{alignSelf: 'flex-end'}}>Hello, World!2</Text>
  </View>

image.png

3. alignItems: ‘flex-end’をViewに:

  <View style=>
    <Text>Hello, World!3</Text>
  </View>

image.png

4. flexDirection: ‘row’ と justifyContent: ‘flex-end’ をViewに:

  <View style=>
    <Text>Hello, World!4</Text>
  </View>

image.png

5. flexDirection: ‘row’ をViewにあてて marginLeft: ‘auto’ をTextに:

  <View style=>
    <Text style={{marginLeft: 'auto'}}>Hello, World!5</Text>
  </View>

image.png

6. position: ‘absolute’ と right: 0 をTextに:

  <View>
    <Text style={{position: 'absolute', right: 0}}>Hello, World!6</Text>
  </View>

image.png

Textの中にTextをネストすると内側のTextがインライン要素のように振る舞う

ちゃんと知らなかった。公式にも書いてあったんですね。

Text · React Native

// ↓ViewではなくTextをコンテナとして使う
<Text style=>
    I am bold
    <Text style=>
      and red
    </Text>
  </Text>

Viewの階層としては全部まとめてひとつのTextViewになっている

image.png

Textコンポーネントをインライン要素っぽく扱う – Qiita

Text

font weight

太字

gist.github.com/knowbody/c5cdf26073b874eae86ba96e7cf3a540

{ fontWeight: '100' }, // Thin
{ fontWeight: '200' }, // Ultra Light
{ fontWeight: '300' }, // Light
{ fontWeight: '400' }, // Regular
{ fontWeight: '500' }, // Medium
{ fontWeight: '600' }, // Semibold
{ fontWeight: '700' }, // Bold
{ fontWeight: '800' }, // Heavy
{ fontWeight: '900' }, // Black

行高さ

lineHeight: number

// Before
  <Text style=>
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
  </Text>

image.png

// After
  <Text style=>
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
  </Text>

image.png

文字間隔

letterSpacing: number

// Before
  <Text style=>
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
  </Text>

image.png

// After
  <Text style=>
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
  </Text>

image.png

画像

外部(http~)Imageはsize(width, height)を指定しないと表示されない?

// BAD
<Image
  source=
/>
// GOOD
<Image
  source=
  style = 
/>

外部Imageは{uri: path}じゃないといけない?

// BAD
<Image
  source={ require('https://facebook.github.io/react-native/docs/assets/favicon.png')
/>
// GOOD
<Image
  source=
  style = 
/>

リサイズ

resizeModeを使う。optionは公式参照 : Image · React Native

  <Image
    source=
    style = {{
      width: 100,
      height: 100,
      resizeMode: 'contain',
    }}
  />

image.png

複数のstyleを当てたいとき

Componentへのstyleに配列形式で渡す。

<View style={[{width: 100}, {backgroundColor: 'gray'}]} />

特定の角だけ角丸にしたい

borderRadiusは各コーナーに設定可能
stackoverflow.com/questions/35341502/how-to-use-border-radius-only-for-1-corner-react-native

  • borderBottomLeftRadius: number
  • borderBottomRightRadius: number
  • borderTopLeftRadius: number
  • borderTopRightRadius: number
  <View style={{
    borderWidth: 1,
    borderColor:'gray',
    borderBottomLeftRadius:5,
    borderTopRightRadius:10,
    margin:10,
  }}>
    <Text>A</Text>
    <Text>B</Text>
  </View>

image.png

[紹介元] CSSタグが付けられた新着投稿 – Qiita 【React Native】よく使うスタイル実装まとめ【StyleSheet】

コメント

記事に戻る

コメントを残す