React Native で要素に複数のスタイルを指定する方法について調査したのでまとめ。
…そう言えば、今までやったことなかったですね。
参考にさせていただいた記事はこちら。
react-native – 複数のスタイルを追加する | react-native Tutorial
https://riptutorial.com/ja/react-native/example/25428/複数のスタイルを追加する
サンプルコードは下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, { Component } from 'react';import { View, Text, StyleSheet } from 'react-native';const styles = StyleSheet.create({ textColor: { color: 'blue', }, textStyle: { margim: 5, fontSize: 15, },});class Example extends Component { render() { return ( <View> <Text style={[styles.textColor, styles.textStyle]}>サンプルテキスト</Text> </View> ); }}export default Example; |
18行目に記述してある通り、スタイルを複数指定する場合は、配列の形式で指定します。
ちなみに、あとから追加したものの方が優先されるので、もし競合があった場合、最後に指定したスタイルが適用されます。
もしレイアウトが崩れたりした場合は、指定の順番を入れ替えるなどしてみてください。
なお、直接指定する場合は下記のように書きます。
1 | <Text style={{ color: 'blue' }, styles.textStyle]}>サンプルテキスト</Text> |
が、私の環境ではどうしても競合が発生して上手く指定できなかったため、結局 1つにまとめて書くことになりました…。
とりあえず動作したので大きな問題はないのですが、時間の余裕があれば、どうにか上手くいく方法はないか調べてみたいと思います。
以上、React Native で要素に複数のスタイルを指定する方法についてでした。
ご参考になれば幸いです。
