Допустим, у меня есть компонент с таким рендером:
<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 задано как массив, который объединяет вашу таблицу стилей с вашими динамическими стилями.
Если проблема возникла синтаксически. Это сработало для меня
<Text style={StyleSheet.flatten([styles.textStyle,{color: 'red'}])}> Hello </Text>
const styles = StyleSheet.create({
textStyle :{
textAlign: 'center',
fontFamily: 'Arial',
fontSize: 16
}
});
Вам нужно что-то вроде этого:
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>
);
}
});
В этом примере я беру массив строк, содержащий данные для строк в компоненте, и сопоставляю его в массив компонентов Text. Я использую встроенные стили для вызова функции getRandomColor каждый раз, когда я создаю новый компонент Text.
Проблема с вашим кодом заключается в том, что вы определяете стиль один раз, и поэтому getRandomColor только получает вызов один раз - когда вы определяете стиль.
Самый простой мой:
<TextInput
style={[
styles.default,
this.props.singleSourceOfTruth ?
{ backgroundColor: 'black' }
: { backgroundColor: 'white' }
]}/>
Я знаю, что есть несколько ответов, но я думаю, что лучший и самый простой - это использование состояния "Чтобы изменить" - это цель штата.
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>
);
}
}
Да, вы можете создавать динамические стили. Вы можете передавать значения из компонентов.
Сначала создайте StyleSheetFactory.js
import { StyleSheet } from "react-native";
export default class StyleSheetFactory {
static getSheet(backColor) {
return StyleSheet.create({
jewelStyle: {
borderRadius: 10,
backgroundColor: backColor,
width: 20,
height: 20,
}
})
}
}
затем используйте его в вашем компоненте следующим образом
import React from "react";
import { View } from "react-native";
import StyleSheetFactory from './StyleSheetFactory'
class Main extends React.Component {
getRandomColor = () => {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
render() {
return (
<View>
<View
style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
/>
<View
style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
/>
<View
style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
/>
</View>
);
}
}
Использование объекта распространения оператора "..." работает для меня:
<View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View>
Если вы используете экран с фильтрами, например, и хотите установить фон фильтра относительно того, был ли он выбран или нет, вы можете сделать:
<TouchableOpacity style={this.props.venueFilters.includes('Bar')?styles.filterBtnActive:styles.filterBtn} onPress={()=>this.setFilter('Bar')}>
<Text numberOfLines={1}>
Bar
</Text>
</TouchableOpacity>
На каком наборе установлен фильтр:
setVenueFilter(filter){
var filters = this.props.venueFilters;
filters.push(filter);
console.log(filters.includes('Bar'), "Inclui Bar");
this.setState(previousState => {
return { updateFilter: !previousState.updateFilter };
});
this.props.setVenueFilter(filters);
}
PS: функция this.props.setVenueFilter(filters) является действием с избыточностью, а this.props.venueFilters является состоянием с избыточностью.
Если кому-то нужно применить условия
selectedMenuUI = function(value) {
if(value==this.state.selectedMenu){
return {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 20,
paddingVertical: 10,
backgroundColor: 'rgba(255,255,255,0.3)',
borderRadius: 5
}
}
return {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 20,
paddingVertical: 10
}
}