React Native-スタイリング

React Nativeで要素をスタイルするには、いくつかの方法があります。

*style* プロパティを使用して、スタイルをインラインで追加できます。 ただし、コードを読むのが難しい場合があるため、これはベストプラクティスではありません。

この章では、スタイリングに Stylesheet を使用します。

コンテナコンポーネント

このセクションでは、前の章のコンテナコンポーネントを簡素化します。

*App.js*

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

プレゼンテーションコンポーネント

次の例では、 StyleSheet をインポートします。ファイルの下部で、スタイルシートを作成し、それを styles 定数に割り当てます。スタイルは camelCase にあり、スタイリングには px または％を使用しないことに注意してください。

テキストにスタイルを適用するには、 style = \ {styles.myText} プロパティを Text 要素に追加する必要があります。

*PresentationalComponent.js*

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

アプリを実行すると、次の出力が表示されます。

React Native Styling

React-native-styling

React Native-スタイリング

コンテナコンポーネント

プレゼンテーションコンポーネント