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

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',
 }

 });

我只希望该死图像来自生成的随机数。任何帮助将不胜感激。

标签： javascriptreact-nativedice

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 中提供名称，否则提供路径