假设我有一个带有这样渲染的组件：
<View style={jewelStyle}></View>
其中jewelStyle =
{
borderRadius: 10,
backgroundColor: '#FFEFCC',
width: 20,
height: 20,
},
我怎样才能使背景颜色动态和随机分配？我试过了
{
borderRadius: 10,
backgroundColor: getRandomColor(),
width: 20,
height: 20,
},
但这使得 View 的所有实例都具有相同的颜色，我希望每个实例都是独一无二的。
有小费吗？
我通常会按照以下方式做一些事情：
<View style={this.jewelStyle()} />
...
jewelStyle = function(options) {
return {
borderRadius: 12,
background: randomColor(),
}
}
每次渲染 View 时，都会使用与其关联的随机颜色实例化一个新的样式对象。当然，这意味着每次重新渲染组件时颜色都会改变，这可能不是您想要的。相反，您可以执行以下操作：
var myColor = randomColor()
<View style={jewelStyle(myColor)} />
...
jewelStyle = function(myColor) {
return {
borderRadius: 10,
background: myColor,
}
}
是的，您可以，实际上，您应该使用它StyleSheet.create来创建您的样式。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class Header extends Component {
constructor(props){
super(props);
}
render() {
const { title, style } = this.props;
const { header, text } = defaultStyle;
const combineStyles = StyleSheet.flatten([header, style]);
return (
<View style={ combineStyles }>
<Text style={ text }>
{ title }
</Text>
</View>
);
}
}
const defaultStyle = StyleSheet.create({
header: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
height: 60,
paddingTop: 15,
shadowColor: '#000',
shadowOffset: { width: 0, height: 3 },
shadowOpacity: 0.4,
elevation: 2,
position: 'relative'
},
text: {
color: '#0d4220',
fontSize: 16
}
});
export default Header;
接着：
<Header title="HOME" style={ {backgroundColor: '#10f1f0'} } />
如果您仍然想利用StyleSheet.create并拥有动态样式，请尝试以下操作：
const Circle = ({initial}) => {
const initial = user.pending ? user.email[0] : user.firstName[0];
const colorStyles = {
backgroundColor: randomColor()
};
return (
<View style={[styles.circle, colorStyles]}>
<Text style={styles.text}>{initial.toUpperCase()}</Text>
</View>
);
};
const styles = StyleSheet.create({
circle: {
height: 40,
width: 40,
borderRadius: 30,
overflow: 'hidden'
},
text: {
fontSize: 12,
lineHeight: 40,
color: '#fff',
textAlign: 'center'
}
});
请注意如何将 的style属性View设置为将样式表与动态样式组合在一起的数组。
最简单的是我的：
<TextInput
style={[
styles.default,
this.props.singleSourceOfTruth ?
{ backgroundColor: 'black' }
: { backgroundColor: 'white' }
]}/>
在语法上有一些问题。这对我有用
<Text style={[styles.textStyle,{color: 'red'}]}> Hello </Text>
const styles = StyleSheet.create({
textStyle :{
textAlign: 'center',
fontFamily: 'Arial',
fontSize: 16
}
});