我可以在React Native中制作dynamic样式吗？
假设我有一个像这样的渲染组件：
<View style={jewelStyle}></View> 哪里jewelStyle =
{ borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, },
我怎样才能使背景颜色dynamic和随机分配？ 我试过了
{ borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, },
但是这使View的所有实例都具有相同的颜色，我希望每个实例都是独立的。
有小费吗？
我通常按照以下方式做一些事情：
<View style={jewelStyle()} />
…
jewelStyle = function(options) { return { borderRadius: 10, background: randomColor(), } }
每一次渲染视图，一个新的样式对象将被实例化与它相关的随机颜色。 当然，这意味着每次组件重新渲染时颜色都会改变，这可能不是您想要的。 相反，你可以做这样的事情：
var myColor = randomColor() <View style={jewelStyle(myColor)} />
…
jewelStyle = function(myColor) { return { borderRadius: 10, background: myColor, } }
是的，你可以和实际上，你应该使用StyleSheet.create来创build你的风格。
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并且还有dynamic样式，那么试试这个：
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' } });
请注意View的style属性如何设置为一个数组，它将样式表与dynamic样式相结合。
你会想要这样的东西：
var RandomBgApp = React.createClass({ render: function() { var getRandomColor = function() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; }; var rows = [ { name: 'row 1'}, { name: 'row 2'}, { name: 'row 3'} ]; var rowNodes = rows.map(function(row) { return <Text style={{backgroundColor:getRandomColor()}}>{row.name}</Text> }); return ( <View> {rowNodes} </View> ); } });
在这个例子中，我将包含组件中行的数据的rows数组，并映射到一个Text组件数组中。 每次创build新的Text组件时，我都使用内联样式来调用getRandomColor函数。
你的代码的问题是，你定义了一次样式，因此getRandomColor只会被调用一次 – 当你定义样式。
有一些问题的句法。 这对我有效
<Text style={StyleSheet.flatten([styles.textStyle,{color: 'red'}])}> Hello </Text> const styles = StyleSheet.create({ textStyle :{ textAlign: 'center', fontFamily: 'Arial', fontSize: 16 } });
我知道有几个答案，但我认为最好，最简单的是使用状态“改变”是国家的目的。
export default class App extends Component { constructor(props) { super(props); this.state = { style: { backgroundColor: "white" } }; } onPress = function() { this.setState({style: {backgroundColor: "red"}}); } render() { return ( ... <View style={this.state.style}></View> ... ) }
}
您可以将状态值直接绑定到样式对象。 这里是一个例子：
class Timer extends Component{ constructor(props){ super(props); this.state = {timer: 0, color: '#FF0000'}; setInterval(() => { this.setState({timer: this.state.timer + 1, color: this.state.timer % 2 == 0 ? '#FF0000' : '#0000FF'}); }, 1000); } render(){ return ( <View> <Text>Timer:</Text> <Text style={{backgroundColor: this.state.color}}>{this.state.timer}</Text> </View> ); } }
最简单的是我的：
<TextInput style={styles.default, [ this.props.singleSourceOfTruth ? {backgroundColor: 'black'} : {backgroundColor: 'white'} ]}/>
