Phản ứng kiểu gốc toàn cầu

Question

Tôi mới sử dụng React và tôi hiểu lợi ích của các kiểu nội tuyến dựa trên thành phần. Nhưng tôi tự hỏi nếu có một cách phong nha để có một số loại phong cách toàn cầu. Ví dụ: tôi muốn sử dụng cùng màu Văn bản và Nút trong suốt ứng dụng của mình. Thay vì lặp lại trong mỗi thành phần (và sau đó phải thay đổi nó trong x vị trí nếu cần), suy nghĩ ban đầu của tôi là tạo một lớp cơ sở StyleSheet trong tập tin riêng của nó và nhập nó vào các thành phần của tôi.

Có cách nào hay hơn 'Phản ứng' không?

Answer 1

bạn có thể tạo biểu định kiểu có thể sử dụng lại js. Ví dụ:

stylesheet (style.js):

'use strict'; 

var React = require('react-native'); 

var { 
    StyleSheet, 
} = React; 

module.exports = StyleSheet.create({ 

alwaysred: { 
    backgroundColor: 'red', 
    height: 100, 
    width: 100, 
}, 

}); 

sử dụng trong thành phần

var s = require('./style'); 

sau đó

<View style={s.alwaysred} ></View> 

Answer 2

Bạn cũng có thể thử react-native-extended-stylesheet hỗ trợ biến phong cách toàn cầu:

// app.js 
EStyleSheet.build({ 
    buttonColor: 'green' 
}); 

// component.js 
var styles = EStyleSheet.create({ 
    button: { 
    backgroundColor: '$buttonColor', 
    ... 
    } 
}); 

Answer 3

Hãy thử thư viện của tôi react-native-style-tachyons, không chỉ mang đến cho bạn phong cách toàn cầu mà còn là hệ thống bố cục đáp ứng đầu tiên với chiều rộng và chiều cao tương ứng với phông chữ gốc của bạn.

Answer 4

Tạo tệp cho kiểu của bạn (I.E., Style.js).

Dưới đây là một ví dụ:

import { StyleSheet } from 'react-native'; 

export default StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    welcome: { 
    fontSize: 20 
    } 
}); 

Trong bất kỳ dữ liệu mà bạn muốn sử dụng phong cách của bạn, thêm dòng sau:

import styles from './Styles' 

Answer 5

Nếu bạn chỉ muốn đặt một số biến toàn cầu bạn có thể thử.

AppStyles.js

export default AppStyles = { 
    colour: { 
     background: '#f4f9fd', 
     font: '#434e5a', 
     primary: '#ff3b30' 
    } 
} 

index.ios.js

import AppStyles from './AppStyles'; 

const styles = StyleSheet.create({ 
    container: { 
     backgroundColor: AppStyles.colour.background 
    } 
}); 

Answer 6

Hãy xem Shoutem Themes cho Phản ứng Native.

Đây là những gì bạn nhận được với Shoutem Theme:

phong cách toàn cầu nơi phong cách nhất định được tự động áp dụng cho thành phần theo tên phong cách của nó:

const theme = { 
    'my.app.ComponentStyleName': { 
    backgroundColor: 'navy', 
    }, 
}; 

Kích hoạt phong cách cụ thể thành phần nhất định với styleName (như lớp CSS):

const theme = { 
    'my.app.ComponentStyleName': { 
    '.rounded': { 
     borderRadius: 20, 
    }, 
    backgroundColor: 'navy', 
    }, 
}; 

// Implementation - will apply borderRadius to Component 
<Component styleName="rounded"/> 

Thừa kế kiểu tự động:

const theme = { 
    'my.app.ComponentStyleName': { 
    'my.app.ChildComponentStyleName': { 
     backgroundColor: 'red', 
    }, 
    '.rounded': { 
     borderRadius: 20, 
    }, 
    backgroundColor: 'navy', 
    }, 
}; 

// Implementation - will apply red background color to ChildComponent 
<Component styleName="rounded"> 
    <ChildComponent/> 
</Component> 

kiểu lồng nhau cho các thành phần gồm:

const theme = { 
    'my.app.ComponentStyleName': { 
    containerView: { 
     paddingTop: 10, 
    }, 
    innerView: { 
     backgroundColor: 'yellow', 
    }, 
    }, 
}; 

// Of course do not forget to connect Component 
function Component({ style }) { 
    return (
    <View style={style.containerView}> 
    <View style={style.innerView}> 
    <Text>Warning with yellow background.</Text> 
    </View> 
    </View> 
); 
} 

Để có được nó làm việc bạn cần phải sử dụng StyleProvider, thành phần wrapper cung cấp phong cách cho tất cả các thành phần khác thông qua ngữ cảnh. Tương tự như Redux StoreProvider.

Ngoài ra, bạn cần kết nối thành phần của mình theo kiểu với connectStyle để bạn luôn sử dụng thành phần được kết nối. Tương tự như Redux connect.

export const styledComponent = connectStyle('my.app.ComponentStyleName', 
           { ...defaultStyleIfAny })(Component); 

Bạn có thể xem ví dụ trong tài liệu.

Một điều cuối cùng, chúng tôi cũng cung cấp bộ thành phần trong UI ToolKit đã được kết nối với kiểu, vì vậy bạn chỉ có thể nhập chúng và tạo kiểu theo kiểu/chủ đề chung của mình.

Answer 7

Bạn phải tạo một tập tin để lưu trữ tất cả các phong cách trong nó như 'styles.js' và viết mã kiểu css như bạn cần

'use strict'; 
import {StyleSheet} from 'react-native'; 

export default StyleSheet.create({ 

    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    }, 

    title: { 
     fontSize: 10, 
     color: '#000', 
     backgroundColor: '#fff' 
    }, 

    button: { 
     fontSize: 12, 
     color: '#000', 
     backgroundColor: '#fff' 
    } 

}); 

và bây giờ bạn có thể sử dụng phong cách toàn cầu như bạn có thể thấy

import React, { Component } from 'react'; 
import { View, Button } from 'react-native'; 
import StyleSheet from './config/styles'; 

export default class App extends Component { 

    render() { 
    return (
     <View 
     style={StyleSheet.container}> 
     <Button 
      style={StyleSheet.button} 
      title="Go to Lucy's profile" 
     /> 
     </View> 
    ); 
    } 
} 

Answer 8

file CSS bên ngoài main.css

'use strict'; 

var { 
    StyleSheet, 
} = 'react-native'; 

module.exports = StyleSheet.create({ 

    main: { 
    backgroundColor: 'gray', 
    height: 20, 
    width: 100, 
    } 
}); 

tạo dụ của tệp css trong thành phần.

var mainCss = require('./main'); 

<View style={mainCss.main}><Text>Hello</Text></View>