我正在尝试为具有默认样式的React-Native应用创建一些可重用的UI组件。
示例默认MyText
(橙色,14,粗体):
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>
}
}
我想如何使用它:
import Text from '../ui/myText';
...
<Text style={{color: 'black'}}>My custom styled text, but in black instead of orange</Text>
...
有办法做到这一点吗?显然,如果我尝试访问this.props.style
,它只返回已编译样式表的ID。
答案 0 :(得分:24)
我在浏览React-Native-Router-Flux的源代码时找到了一种方法。
样式表可以作为数组传入,看起来React-Native按从左到右的顺序应用它们(允许您覆盖特定的属性)。
以下是更新的MyText
组件应如下所示:
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>
}
}
答案 1 :(得分:1)
使用打字稿和功能组件:
type CustomProps = {
text: string,
onPress: () => void,
style?: {}
};
const CustomButton = ({ style, text, onPress }: CustomProps) => {
return (
<TouchableOpacity
style={[styles.container, style]}
onPress={onPress}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
)
};
const styles = StyleSheet.create({
container: {
elevation: 8,
backgroundColor: Colors.white,
},
text: {
fontSize: 18,
color: Colors.primary_dark,
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase",
textAlign: "center"
}
});
然后像这样使用它:
<CustomButton style={{ backgroundColor: 'red'}} text="hi" onPress={() => {console.log('Hi'}}