Question

我花了大约2个小时，我真的需要帮助。我想从我的数组中获取随机颜色，然后将backgroundColor设置为该颜色。我在那里复制了我的代码。 https://jsfiddle.net/1x0k2ot4/

感谢您的一切建议。

constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        inputValue: '',
        backgroundColor: '',
        dataSource: ds.cloneWithRows([]),
    };
    this._handleTextChange = this._handleTextChange.bind(this);
    this._handleDeleteButtonPress = this._handleDeleteButtonPress.bind(this);
    this._setColor = this._setColor.bind(this);
}

_setColor() {
    const backgroundColor = backgroundcolors[Math.floor(Math.random()*backgroundcolors.length)];
    this.setState({
        backgroundColor: backgroundColor
    })
}<View style={{ backgroundColor: this.state.backgroundColor, alignItems: 'center', height: 80, padding: 8, borderWidth: 1.5, borderColor: '#e0e0e0', flex: 1, flexDirection: 'row', marginBottom: 5,}}>
                                <Text style={styles.todoText}>{rowData}</Text>
                                <View>
                                    <TouchableHighlight onPress={handleDelete} style={styles.crossCloseButton}>
                                        <View>
                                            <Image style={styles.imgClose} source={{uri: 'http://playground.davidfutera.cz/close.png'}}/>
                                        </View>
                                    </TouchableHighlight>
                                </View>
                            </View>

Answer 1

试试这个，你的帖子有点乱，但我认为这会帮助你，如果有什么错误告诉我，它应该工作

constructor(props) {
super(props);
  this.state = {
    bgColor: [
      'red',
      'blue',
      'yellow',
    ],
    selectedColor: '',
  };
}


componentDidMount() {
  this._getRandomColor()
}

_getRandomColor(){
  var item = this.state.bgColor[Math.floor(Math.random()*this.state.bgColor.length)];
  this.setState({
    selectedColor: item,
  })
}

<View style={{backgroundColor: this.state.selectedColor}}>
  <Text>Test</Text>
</View>

Answer 2

如果使用由https://www.paulirish.com/2009/random-hex-color-code-snippets/提供的6位十六进制代码生成器，可能会更容易和更简洁。这样它更随机，代码虽然更加神秘，但更优雅。

从数组中设置随机backgroundColor

2 个答案: