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

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

1 个答案: