Thêm Styling với Stylesheets

StylesSheet giống ( và cũng không giống) CSS. Ví dụ trong CSS chúng ta có thể viết như sau:

.header {
    padding: 20px;
    margin: 15px 0;
    position: absolute;
}

Trong React-Native, nó không có những khái niệm như pixels, classes. Nếu bạn muốn viết giống trong React Native StyleSheet, nó sẽ trông giống như sau:

import React from 'react';
import {
    TouchableHightlight,
    Text,
    StyleSheet
} from 'react-native';
import styles from './styles'

const Button = () => (
    <TouchableHighlight style={style.container}>
        <Text style={style.button}>Click me </Text>
    </TouchableHightligth>
)

export default Button;

const style = StyleSheet.create({
    container : {
        padding: 20,
        marginTop: 15,
        marginBottom: 15,
        position: 'absolute'
    },
      button : {
        padding: 20,
        marginTop: 15,
        marginBottom: 15,
        position: 'absolute'
    }
});