Вопрос:

Могу ли я создавать динамические стили в React Native?

css reactjs react-native

85622 просмотра

11 ответа

1159 Репутация автора

Допустим, у меня есть компонент с таким рендером:

<View style={jewelStyle}></View>

Где jewelStyle =

  {
    borderRadius: 10,
    backgroundColor: '#FFEFCC',
    width: 20,
    height: 20,
  },

Как я могу сделать цвет фона динамическим и назначенным случайным образом? я пробовал

  {
    borderRadius: 10,
    backgroundColor: getRandomColor(),
    width: 20,
    height: 20,
  },

Но это делает все экземпляры View одинаковыми, я хочу, чтобы каждый был уникальным.

Какие-нибудь советы?

Автор: Pete Thorne Источник Размещён: 31.03.2015 08:08

Ответы (11)


147 плюса

1511 Репутация автора

Решение

Я обычно делаю что-то вроде:

<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,
   }
 }
Автор: Jimmie Berg Размещён: 31.03.2015 08:56

4 плюса

12078 Репутация автора

Вы хотите что-то вроде этого:

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функции каждый раз, когда создаю новый текстовый компонент.

Проблема с вашим кодом заключается в том, что вы определяете стиль один раз, и поэтому getRandomColor вызывается только один раз - когда вы определяете стиль.

Автор: Colin Ramsay Размещён: 31.03.2015 08:58

53 плюса

706 Репутация автора

Да, вы можете и на самом деле, вы должны использовать 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'} } />
Автор: diegoprates Размещён: 07.10.2016 10:52

1 плюс

320 Репутация автора

Я знаю, что есть несколько ответов, но я думаю, что лучшим и самым простым является использование состояния «Изменить» - это государственная цель.

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>
          ...
       )
    }

}

Автор: Cesar Alonso Размещён: 27.10.2016 04:31

1 плюс

5697 Репутация автора

Вы можете привязать значение состояния непосредственно к стилю объекта. Вот пример:

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>
 );
 }
}
Автор: Hossam Ghareeb Размещён: 17.11.2016 11:25

18 плюса

560 Репутация автора

Если вы все еще хотите использовать преимущества 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установлено в виде массива, который объединяет вашу таблицу стилей с вашими динамическими стилями.

Автор: Carlos Atencio Размещён: 28.04.2017 01:31

7 плюса

1534 Репутация автора

Были некоторые проблемы синтаксического. Это сработало для меня

<Text style={StyleSheet.flatten([styles.textStyle,{color: 'red'}])}> Hello </Text>

const styles = StyleSheet.create({
   textStyle :{
      textAlign: 'center',   
      fontFamily: 'Arial',
      fontSize: 16
  }
  });
Автор: Yogesh Lolusare Размещён: 01.09.2017 12:58

2 плюса

407 Репутация автора

Самый простой мой:

<TextInput
  style={[
    styles.default,
    this.props.singleSourceOfTruth ?
    { backgroundColor: 'black' } 
    : { backgroundColor: 'white' }
]}/>
Автор: s̮̦̩e̝͓c̮͔̞ṛ̖̖e̬̣̦t̸͉̥̳̼ Размещён: 01.11.2017 04:48

0 плюса

1 Репутация автора

Если вы используете экран с фильтрами, например, и хотите установить фон фильтра относительно того, был ли он выбран или нет, вы можете сделать:

<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является состоянием с избыточностью.

Автор: FrikLima Размещён: 17.01.2018 01:28

0 плюса

2270 Репутация автора

Да, вы можете создавать динамические стили. Вы можете передавать значения из компонентов.

Сначала создайте 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>
    );
  }
}
Автор: Rajesh Nasit Размещён: 06.10.2018 04:59

0 плюса

1 Репутация автора

Использование объекта распространения оператора "..." работает для меня:

<View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View>
Автор: Cem Roso Размещён: 24.12.2018 09:04
Вопросы из категории :
32x32