Làm cách nào bạn có thể chuyển kiểu thông qua thành phần vùng chứa trong React-Native

Question

Tôi đang cố gắng tạo một số thành phần giao diện người dùng có thể sử dụng lại cho ứng dụng React-Native có kiểu mặc định.

Một ví dụ mặc định MyText (cam, 14, in đậm):

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

const styles = StyleSheet.create({text: {color: 'orange', fontSize: 14, fontWeight: 'bold'}}); 

export default class MyText extends Component { 
    render() { 
     return <Text style={styles.text}>{this.props.children}</Text> 
    } 
} 

Làm thế nào tôi muốn sử dụng nó:

import Text from '../ui/myText'; 

... 
<Text style={{color: 'black'}}>My custom styled text, but in black instead of orange</Text> 
... 

Có cách nào để làm điều này? Rõ ràng nếu tôi cố gắng truy cập this.props.style nó chỉ trả về một ID cho một bản định kiểu được biên dịch.

Answer 1

Tôi đã tìm thấy cách để thực hiện điều đó trong khi duyệt qua mã nguồn cho React-Native-Router-Flux.

Biểu định kiểu có thể được chuyển thành một mảng và có vẻ như React-Native áp dụng chúng theo thứ tự từ trái sang phải (cho phép bạn ghi đè các thuộc tính cụ thể).

Dưới đây là những gì các cập nhật MyText thành phần sẽ giống như thế:

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

const styles = StyleSheet.create({text: {color: 'orange', fontSize: 14, fontWeight: 'bold'}}); 

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