phản ứng kiểu gốc áp dụng cho tất cả các thành phần văn bản

Question

Có cách nào dễ dàng để áp dụng kiểu cho tất cả các thành phần của một loại cụ thể chẳng hạn như Text hoặc ScrollView v.v.
Ví dụ: tôi muốn sử dụng kiểu verdanafontFamily cho tất cả các thành phần Văn bản trên tất cả các cảnh. Có một cách dễ dàng để đạt được hơn chỉ định phong cách mỗi khi tôi sử dụng thành phần văn bản?
Hoặc không yêu cầu tạo thành phần Văn bản tùy chỉnh? và sử dụng nó thay vì thành phần cơ bản như ví dụ bên dưới. Sử dụng MyText thay vì Text

const MyText = ({data}) => <Text style={style.commonTextStyle}>{data}</Text> 

Answer 1

Bạn có thể trích xuất các phong cách phổ biến và cung cấp cho họ như toàn cầu. bạn có thể thêm/chỉnh sửa kiểu cho mỗi lần xem văn bản nếu cần.

export default StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}) 

Sau đó u có thể sử dụng <Text style={[styles.welcome, {color:'red'}]]}>Hello</Text>

U nên xem xét libs như react-native-extended-stylesheet

Bạn cũng có thể làm theo các kỹ thuật về làm thế nào để giữ cho kiểu đơn giản và readble.
Tham khảo Tips for styling React

Answer 2

Ngoài câu trả lời của Vicky, bạn chỉ có thể tạo ra một phần mới với tên văn bản hoặc MyText vv, và nhập nó vào dự án của bạn bất cứ khi nào bạn cần nó.

function MyText(props) { 
    return (
    <Text style={styles.MY_CUSTOM_STYLES}> 
     {props.children} 
    </Text> 
); 
} 

Và sử dụng nó như thế nào,

import MyText from '/path/to/MyText'; 

... 

render() { 
    return (<MyText>Now I have my custom styles.</MyText>); 
} 

Bạn có thể sử dụng nó như text import bằng cách thay đổi tên của nó nếu bạn cảm thấy quá quen với việc xác định các thành phần văn bản. Tham khảo this documentation để đọc thêm. (Lưu ý rằng: MyText phần trên là một functional stateless component cho các định nghĩa trọng lượng nhẹ.)

Answer 3

Bạn phải tạo một phần RN như thế này:

/* @flow */ 

import React, { Component } from 'react'; 
import { Text as TextRN } from 'react-native'; 

export default class Text extends Component { 
    render() { 
    return (
     <TextRN style={[YOUR_CUSTOM_STYLES, this.props.style]}> 
     {this.props.children} 
     </TextRN> 
    ) 
    } 
} 

Bằng cách này, phần chữ của riêng bạn có thể thừa kế phong cách bổ sung từ bất cứ nơi nào bạn sử dụng chúng.

Lưu ý: Hãy nhớ rằng không thể sử dụng thành phần văn bản tùy chỉnh của riêng bạn trong mọi trường hợp, ví dụ: bên trong TouchableHighlight, trong trường hợp này, bạn phải sử dụng văn bản gốc từ thư viện gốc phản ứng.

Bây giờ, bạn chỉ có thể thay đổi khẩu của bạn cho:

import Text from 'YOUR_PATH/Text.js' 

Hope this helps.

Answer 4

https://github.com/Ajackster/react-native-global-props dường như cung cấp kiểu toàn cầu cho hầu hết các thành phần gốc có phản ứng bao gồm Văn bản, Chế độ xem, v.v. Readme từ GitHub có các ví dụ. Điều này dường như giải quyết nhu cầu tuy nhiên tôi chưa thử nghiệm điều này.

Answer 5

Glamorous cũng xử lý này rất sạch trong Phản ứng Quê quán:

const MyText = glamorous.Text({ 
    // ... any styles 
}); 

export MyText;