根据生成的随机数设置骰子

Question

我正在从事骰子游戏。我已经生成了随机数，我只想显示任何随机数生成的骰子的图像。我只想在单击"滚动"按钮时，将生成随机数。我希望在单击图像

时出现相同的骰子图像

    export default class App extends Component {
     constructor(){
    super();
    this.state={
   // This is our Default number value
   NumberHolder : 1
   }
   }
   GenerateRandomNumber=()=>
   {
   var RandomNumber = Math.floor(Math.random() * 6) + 1 ;
   this.setState({
    NumberHolder : RandomNumber
    })
     }
    render() {
    return (
   <View style={styles.MainContainer} >
   <Text style={{marginBottom: 10, fontSize: 20}}> 
   {this.state.NumberHolder}</Text>
   <Button title="Roll again" onPress={this.GenerateRandomNumber} />
   </View>
   );
   }
   }
  const styles = StyleSheet.create(
  {
  MainContainer: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 }
 });

我只希望那个模具映像是生成哪个随机数的。任何帮助将不胜感激。

Answer 1

您可以根据数字保存图像，然后检索

let randomNumber = 5
// send your randomNumber as a prop to Image Component
<Image imageid = {randomNumber} >

图像组件的代码

import React from "react"
class Image extends React.Component{
    render(){
        return(
            <div className="diceImage">
               <img src = `${this.props.imageid}.jpg` alt="an image of the dice">
           </div>
        )
    }
}
export default Image

如果您在同一文件夹中有图像，请简单地提供src中的名称，否则提供路径