通过添加数字来获得两个值的结果

Question

我正在做骰子，我只想要我从 2 个不同的骰子中得到的两个数字的总和我得到两个随机数我想要两个数字的总和。

   onstructor(props){

   super(props);

   this.state={

    // This is our Default number value
    NumberHolder : 1

    }

    this.state={

    // This is our Default number value
    NumberHold : 1

    }


    }

    GenerateRandomNumber = () => {
    let RandomNumber = Math.floor(Math.random() * 6) + 1 ;
    this.setState({
    NumberHolder : RandomNumber
    })
    let RandomNumber1 = Math.floor(Math.random() * 6) + 1 ;
    this.setState({
    NumberHold : RandomNumber1
    })
    }

    getDice(diceNum) {
    let diceSource = require(`./images/dice1.png`)
    if (diceNum === 2) {
    diceSource = require(`./images/dice2.png`)
    } else if (diceNum === 3) {
    diceSource = require(`./images/dice3.png`)
    } else if (diceNum === 4) {
    diceSource = require(`./images/dice4.png`)
    } else if (diceNum === 5) {
    diceSource = require(`./images/dice5.png`)
    } else if (diceNum === 6) {
    diceSource = require(`./images/dice6.png`)
     } else {
    diceSource = require(`./images/dice1.png`)
    }
    return (
    <Image style={styles.dice}source={diceSource} />
     )
     }
    getDice1(diceNum) {
    let diceSourc = require(`./images/dice1.png`)
    if (diceNum === 2) {
    diceSourc = require(`./images/dice2.png`)
    } else if (diceNum === 3) {
    diceSourc = require(`./images/dice3.png`)
    } else if (diceNum === 4) {
    diceSourc = require(`./images/dice4.png`)
    } else if (diceNum === 5) {
    diceSourc = require(`./images/dice5.png`)
    } else if (diceNum === 6) {
    diceSourc = require(`./images/dice6.png`)
    } else {
    diceSourc = require(`./images/dice1.png`)
    }
    return (
   <Image style={styles.dice1}source={diceSourc} />
   )
   }
   render() {
  // this is just for the demo purposes
  const imageSize = this.state.NumberHolder * 50


   return (
   <View style={styles.MainContainer} >
   <Text style={{ marginBottom: 10, fontSize: 20,marginTop:10 }}> 
   {this.state.NumberHolder}
   </Text>
   <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}> 
   {this.state.NumberHold}

    </Text>

    <View style={{flexDirection:'row'}}>
    <View style={{fleax:1,justifyContent:"flex-start",alignSelf:"flex- 
     start",    }}>
              { this.getDice(this.state.NumberHolder) }
    </View>
    <View style={{alignSelf:"flex-end",marginLeft:30,marginBottom:9}}>
    { this.getDice1(this.state.NumberHold) }
    </View>
    </View>

    <Button style={{marginTop:40}}  title="Roll again" onPress= 
    {this.GenerateRandomNumber} />
   </View>

我只希望通过添加 2 个值来获得结果。我已经生成了两个数字，在此基础上我得到的图像我只想要一个结果，方法是添加 2 个随机数

Answer 1

我重构了你所有的代码，并且在 generateRandom 方法上我添加了一个状态为 sum 的变量，现在假设你想在视图中使用它，你可以通过调用 {this.state.sum}

constructor(props) {
   super(props);

   this.state={
        // This is our Default number value
        NumberHolder : 1,
        NumberHold : 1,
        sum: 0
    }
}

GenerateRandomNumber = () => {
    let RandomNumber = Math.floor(Math.random() * 6) + 1;
    let RandomNumber1 = Math.floor(Math.random() * 6) + 1 ;
    let sum = RandomNumber + RandomNumber1;

    this.setState({
        NumberHolder : RandomNumber,
        NumberHold : RandomNumber1,
        sum
    });
}

getDice(diceNum) {
    diceSource = require(`./images/dice${diceNum}.png`)
    return (
        <Image style={styles.dice} source={diceSource} />
    )
}

getDice1(diceNum) {
    diceSourc = require(`./images/dice${diceNum}.png`);

    return (
        <Image style={styles.dice1} source={diceSourc} />
   )
}

render() {
    const imageSize = this.state.NumberHolder * 50

    return (
        <View style={styles.MainContainer} >
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:10 }}>{this.state.NumberHolder}</Text>
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}>{this.state.NumberHold}</Text>
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}>{this.state.sum}</Text>

            <View style={{flexDirection:'row'}}>
                <View style={{flex:1, justifyContent:"flex-start", alignSelf:"flex-start"}}>
                    {this.getDice(this.state.NumberHolder)}
                </View>
                <View style={{alignSelf:"flex-end",marginLeft:30,marginBottom:9}}>
                {this.getDice1(this.state.NumberHold)}
                </View>
            </View>

        <Button style={{marginTop:40}}  title="Roll again" onPress={this.GenerateRandomNumber} />
    </View>
}