React-native-styling
提供:Dev Guides
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
}
})
アプリを実行すると、次の出力が表示されます。