[React Native] スタイル周りのTips

前書き

ReactNativeで開発を行った際に、得たTipsをまとめています。

目次

1.複数のstyleをあてたい
2.要素を上下中央揃えにしたい
3.Androidでshadowが当たらないことがある
4.Android（機種依存かも）でダークモードにするとアプリのstyleが変更されてしまう
5.height、maxHeightを両方充てたのに、最大値がうまく機能しない
6.Androidで文字が見切れてしまう
7.デバイスのサイズを取得する
8.ScrollViewのスクロールバーを非表示にする

1. 複数のstyleをあてたい

用途：その要素だけ、共通のスタイルに加えて個別のスタイルをあてたい

// 方法１：オブジェクト
<View style={Object.assign({}, style1, style2)}>
/* 略 */
</View>

// 方法2：配列
<View style={[style1, style2]}>
/* 略 */
</View>

公式では、方法２が記載されているので、方法２で記述するのが良いと思います

2. 要素を上下中央揃えにしたい

width: '90%',
maxWidth: 500,
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 'auto',
marginBottom: 'auto',

3. Androidでshadowが当たらないことがある

実際のケース：TouchableWithoutFeedbackタグの子要素のViewに対してshadowを付与したが当たらなかった

// 解決策：TouchableWithoutFeedbackとshadowをあてるViewの間にViewを挟む
<TouchableWithoutFeedback>
  <View>
    <View style={{shadowColor: 'rgba(181,173,165,1)'}}>
      /* 略 */
    </View>
  </View>
</TouchableWithoutFeedback>

※ 実際はshadowColor以外も設定する必要があります

4. Android（機種依存かも）でダークモードにするとアプリのstyleが変更されてしまう

実際のケース：xiaomiのスマホでダークモードに設定すると、アプリの色も変更されてしまった

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:forceDarkAllowed">false</item>"
</style>

5. height、maxHeightを両方充てたのに、最大値がうまく機能しない

<View style={{
    width: (screenWidth > 500 ? 500 : screenWidth) * 0.9,
    height: screenWidth > 500 ? 300 : 400,
}}>

※ maxHeightを使用せずにheightの値を動的に切り替えるように実装を変えました

6. Androidで文字が見切れてしまう

実際のケース：fontSizeとlineHeightに同じ値を指定していた場合、iOSだと正常に見えるがAndroidだと文字が見切れる

<Text style={{fontSize: 16, lineHeight: 20}}>Androidで文字が見切れる</Text>

Androidの場合はlineHeightを[文字サイズ] * 1.1かそれ以上に指定しましょう

7. デバイスのサイズを取得する

/**
* Function Componentを利用していて、画面の横向きも考慮する必要がある場合
**/
import { useWindowDimensions } from 'react-native'

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions()

/**
* デバイスの向きを変えたイベントでサイズを取得したくて、Class Component
**/
import { Dimensions, ScaledSize　} from 'react-native'

// スクリーン幅の保存する処理
const handleScreenWidth = (window: ScaledSize) => {
  this.setState({ screenWidth: window.width })
}
componentWillMount() {
  Dimensions.addEventListener('change', ({ window }) => handleScreenWidth(window))
}
componentWillUnMount() {
  Dimensions.removeEventListener('change', ({ window }) => handleScreenWidth(window))
}

/**
* デバイスの向きを変えなくてもいい場合
**/
import { Dimensions　} from 'react-native'
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

8. ScrollViewのスクロールバーを非表示にする

<ScrollView horizontal={false} showsVerticalScrollIndicator={false}>
/* 省略 */
</ScrollView>

ちなみにhorizontal={false}を書いておくと横方向へのスクロールが禁止されます

---

逐次更新しますー