149

次のようなレンダーを持つコンポーネントがあるとします。

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

宝石のスタイル =

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

背景色を動的にしてランダムに割り当てるにはどうすればよいですか? 私はもう試した

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

しかし、これにより View のすべてのインスタンスが同じ色になり、それぞれが一意になるようにしたいと考えています。

任意のヒント？

4

20 に答える 20

203

私は通常、次の行に沿って何かを行います。

<View style={this.jewelStyle()} />

...

jewelStyle = function(options) {
   return {
     borderRadius: 12,
     background: randomColor(),
   }
 }

ビューがレンダリングされるたびに、ランダムな色が関連付けられた新しいスタイル オブジェクトがインスタンス化されます。もちろん、これはコンポーネントが再レンダリングされるたびに色が変わることを意味しますが、これはおそらくあなたが望むものではありません. 代わりに、次のようなことができます。

var myColor = randomColor()
<View style={jewelStyle(myColor)} />

...

jewelStyle = function(myColor) {
   return {
     borderRadius: 10,
     background: myColor,
   }
 }
于 2015-03-31T08:56:58.903 に答える
71

はい、できますし、実際には、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'} } />
于 2016-10-07T22:52:00.440 に答える
20

最も簡単なのは私のものです：

<TextInput
  style={[
    styles.default,
    this.props.singleSourceOfTruth ?
    { backgroundColor: 'black' } 
    : { backgroundColor: 'white' }
]}/>
于 2017-11-01T04:48:00.783 に答える
5

次のようなものが必要です。

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 コンポーネントを作成するたびに、インライン スタイルを使用して関数を呼び出します。

コードの問題は、スタイルを 1 回定義するため、スタイルを定義するときに getRandomColor が 1 回だけ呼び出されることです。

于 2015-03-31T08:58:30.633 に答える
3

オブジェクトスプレッド演算子「...」を使用するとうまくいきました：

<View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View>
于 2018-12-24T21:04:24.590 に答える
2

はい、動的なスタイルを作成できます。コンポーネントから値を渡すことができます。

最初に 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>
    );
  }
}
于 2018-10-06T04:59:15.873 に答える
1

状態値をスタイル オブジェクトに直接バインドできます。以下に例を示します。

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>
 );
 }
}
于 2016-11-17T11:25:28.643 に答える
0

誰かが条件を適用する必要がある場合

 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
       }
    }
于 2019-06-28T11:00:39.200 に答える
0

これが私のために働いたものです：

render() {
  const { styleValue } = this.props;
  const dynamicStyleUpdatedFromProps = {
    height: styleValue,
    width: styleValue,
    borderRadius: styleValue,
  }

  return (
    <View style={{ ...styles.staticStyleCreatedFromStyleSheet, ...dynamicStyleUpdatedFromProps }} />
  );
}

何らかの理由で、これが私のものを適切に更新する唯一の方法でした。

于 2020-02-11T07:05:26.317 に答える