Cách Dễ Dàng Tạo Ra Các Kiểu Dáng Có Thể Sử Dụng Lại và Mô-đun trong React Native

react-native-nested-stylesheet

Bảng kiểu dáng có thể lồng nhau cho react-native.

Cài Đặt

npm install react-native-nested-stylesheet

Ghi Chú Về Sử Dụng

Plugin này sẽ cho phép bạn tạo kiểu dáng theo định dạng sau:

...
namespace: {
    styleA: {...},
    styleB: {...},
},
...

Với API StyleSheet thông thường, bạn chỉ có thể tạo bảng kiểu dáng với một cấp. Lưu ý rằng NestedStyleSheet không tạo ra các bộ chọn lồng nhau. Điều này chỉ là để cho phép việc gán tên không gian cho kiểu dáng (ví dụ, chứa các kiểu dáng cho tất cả các mục trong một ListView cụ thể).

Lưu ý: Bạn chỉ được phép bao gồm các đối tượng khác trong một kiểu dáng lồng nhau. Bạn không thể xác định các quy tắc ở cấp độ không gian tên.

Ví Dụ Sử Dụng

var React = require('react-native');
var NestedStyleSheet = require('react-native-nested-stylesheet');

var {
    View,
    Text,
    Image,
} = React;

var styles = NestedStyleSheet.create({
    cells: {
        container: {
            flex: 1,
            flexDirection: 'row',
            alignItems: 'center',
        },
        thumbnail: {
            width: 53,
            height: 81,
        },
        content: {
            flex: 1,
        },
    },
});

var Demo = React.createClass({
    render: function() {
        return (
            <View style={styles.cells.container}>
                <Image source={{...}} style={styles.cells.thumbnail}
                <View style={styles.content}>
                    <Text>...</Text>
                </View>
            </View>
        );
    },
});

module.exports = Demo;

Chi Tiết Tải Về:

Tác giả: pjjanak
Nguồn: https://github.com/pjjanak/react-native-nested-stylesheets

Giấy phép: MIT license