Javascript 颜色在分区列表上保持随机化

嗨，我有一个sectionList，它传递了一个颜色数组+随机选择的背景IMG，以渲染为每行项目的背景。当我滑动以访问该视图时，颜色会闪烁几秒钟，因为随机选择仍在发生。每次我带着列表返回屏幕时，颜色都会闪烁几秒钟，然后稳定下来。我怎么能没有闪烁和随机选择的颜色发生一次加载

            class Main extends React.Component {
                constructor(props, context) {
                super(props, context);

                // app state
                this.state = {
                    listColor: [
                    ['rgba(0,36,155,0.8)', 'rgba(26,0,87,0.8)'],
                    ['rgba(155,0,0,0.8)', 'rgba(87,0,0,0.8)']],
                }
                }


            _handleRandomIndex(arr) {
                return arr[Math.floor(Math.random() * arr.length)]
            }

            _renderItem = ({item, section}) => (
                <TouchableScale
                        style={styles.row}
                        onPress={this._onRowPress.bind(this, item)}
                        activeScale={0.94}
                        tension={0}
                        friction={3}
                        >
                        <View style={ styles.elevationLow } borderRadius={9} > 
                            <ImageBackground source={{uri: this._handleRandomIndex(item.bgImgs).image_link }} borderRadius={9} style={ styles.imageBackground }>
                                <LinearGradient
                                        colors={ this._handleRandomIndex(this.state.listColor) }
                                        start={[0.1,0.1]}
                                        end={[0.5,0.5]}
                                        style={{ padding: 20, borderRadius: 9 }}>

                                </LinearGradient>
                            </ImageBackground>
                        </View>  
                        }
                </TouchableScale>
            )
            }

类主扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
//应用程序状态
此.state={
listColor：[
['rgba（0,36155,0.8）''rgba（26,0,87,0.8）'，
['rgba（155,0,0.8）''rgba（87,0,0,0.8）']，
}
}
_handleRandomIndex（arr）{
返回arr[Math.floor（Math.random（）*arr.length）]
}
_renderItem=（{item，section}）=>(
}
)
}

因为您正在进行数学运算。每次重新渲染都会随机进行。因此，每当渲染函数调用时，它都会更改颜色

更改为：

function _handleRandomIndex(arr) {
    return arr[Math.floor(Math.random() * arr.length)]
}

class Main extends React.Component {
    state = {
        listColor: [
            ['rgba(0,36,155,0.8)', 'rgba(26,0,87,0.8)'],
            ['rgba(155,0,0,0.8)', 'rgba(87,0,0,0.8)']
        ]
    }

    _renderItem = ({ item, section }) => <Item item={item} listColor={this.state.listColor} />
}

class Item extends Component {
    rando = _handleRandomIndex(this.props.listColor);

    render() {
        const { item } = this.props;

        return (
            <TouchableScale
                style={styles.row}
                onPress={this._onRowPress.bind(this, item)}
                activeScale={0.94}
                tension={0}
                friction={3}
            >
                <View style={styles.elevationLow} borderRadius={9}>
                    <ImageBackground source={{ uri: this._handleRandomIndex(item.bgImgs).image_link }} borderRadius={9} style={styles.imageBackground}>
                        <LinearGradient
                            colors={this.rando}
                            start={[0.1, 0.1]}
                            end={[0.5, 0.5]}
                            style={{ padding: 20, borderRadius: 9 }}>

                        </LinearGradient>
                    </ImageBackground>
                </View>
            </TouchableScale>
        )
    }
}

function\u handleRandomIndex（arr）{
返回arr[Math.floor（Math.random（）*arr.length）]
}
类Main扩展了React.Component{
状态={
listColor：[
['rgba（0,36155,0.8）''rgba（26,0,87,0.8）'，
['rgba（155,0,0.8）''rgba（87,0,0,0.8）'
]
}
_renderItem=（{item，section}）=>
}
类项扩展组件{
rando=_handleRandomIndex（this.props.listColor）；
render（）{
const{item}=this.props；
返回(
)
}
}

Noitidart的答案可行，但所有项目都将被随机分配到相同的颜色，如果您希望每个项目都有不同的颜色，我认为您需要这样做：

_renderItem = ({item, section}) => {
          const color = this._handleRandomIndex(this.state.listColor);
          return (
            <TouchableScale
                    style={styles.row}
                    onPress={this._onRowPress.bind(this, item)}
                    activeScale={0.94}
                    tension={0}
                    friction={3}
                    >
                    <View style={ styles.elevationLow } borderRadius={9} > 
                        <ImageBackground source={{uri: this._handleRandomIndex(item.bgImgs).image_link }} borderRadius={9} style={ styles.imageBackground }>
                            <LinearGradient
                                    colors={ color }
                                    start={[0.1,0.1]}
                                    end={[0.5,0.5]}
                                    style={{ padding: 20, borderRadius: 9 }}>

                            </LinearGradient>
                        </ImageBackground>
                    </View>  
                    }
            </TouchableScale>
          )
        }

\u renderItem=（{item，section}）=>{
const color=this.\u handleRandomIndex（this.state.listColor）；
返回(
}
)
}

是，所有颜色都相同。您的解决方案重新渲染时颜色仍在闪烁，还有其他想法吗？谢谢，虽然所有行项目都渲染相同的颜色，但您知道如何将它们渲染为不同的颜色吗？@Matthewsims是否希望偶数行为特定颜色，奇数行为特定颜色？还是每一个都是随机的颜色？显示

Main

组件中的

render

函数。实现这一点的方法是将renderItem分解成自己的组件，并在其构造函数中生成颜色。每一行都是随机的color@MatthewSimms见更新后的帖子。您必须使用自己的构造函数将项分解为自己的组件。在它的构造函数中，我设置了rando。