Question

我需要做两件事：

1.使用循环

我在代码中使用这个东西超过两次：

<Image
 source={require('./Images/ballline.png')}
  style={styles.ballStyle} >
    
<Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
    
      {this.state.display}
    
</Text>
    
</Image>

所以我所做的是使用for循环创建了一个函数，使用它6次

我的功能是这样的：

displayBalls() {

 
for (let i = 0; i <= 5; i++) {
     
return (
    
<Image
    
source={require('./Images/ballline.png')}
    
style={styles.ballStyle} >
    
<Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
  
{this.state.display}
    
</Text>
    
</Image>
    
);
  
}

}

然后在渲染中我做了这个：

<View style={{ flexDirection: 'row', flex: 1, marginTop: 200 }}>
    {this.displayBalls([0])}
</View>

但问题是只显示了1张图片，但我需要显示的是6张图片

我想在每次按下按钮时更新状态，并将这些更新的值存储在那些像显示数据的图像中一个字段

为此，我创建了一个状态数组

但问题是我想在以下字段中显示状态值：第一个按钮按第一个字段中的更新状态然后在第二个按钮上按第二个字段中的更新状态。

这是我的完整代码：

export default class gameScore extends Component {

state = {
  totalruns: 0,
  wickets: 0,
  display: [],
  Triggered: false
}


randomResultFunc() {
result = (Math.floor(Math.random() * (15 - 0)) + 0);
console.log('result----> ' + result);
}

checkResult() {
console.log('checkResult');
  switch (result) {

case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
console.log('checkResult 6');
this.setState({ totalruns: this.state.totalruns += result, display: result });
break;

case 7:
console.log('checkResult 7');
this.setState({ totalruns: this.state.totalruns += 2, display: 2 });
break;

case 8:
console.log('checkResult 8');
this.setState({ totalruns: this.state.totalruns += 1, display: 1 });
break;

case 9:
console.log('checkResult 9');
this.setState({ totalruns: this.state.totalruns += 4, display: 4 });
break;

case 10:
console.log('checkResult 10');
this.setState({ totalruns: this.state.totalruns += 6, display: 6 });
break;

case 11:
case 12:
case 13:
case 14:
case 15:
console.log('checkResult 15');
this.setState({ wickets: this.state.wickets += 1, display: 'W' });
break;

default:
console.log('default');
break;

  }
}

displayFunc() {
  this.randomResultFunc();
  this.checkResult();
}

displayBalls() {

 for (let i = 0; i <= 5; i++) {
     return (
    <Image
    source={require('./Images/ballline.png')}
    style={styles.ballStyle} >
    <Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
    {this.state.display}
    </Text>
    </Image>
    );
  }
}
  render() {
    console.log('State', this.state);
    return (
<Image
  source={require('./Images/bg_inner.png')}
  style={styles.backgroundStyle}>

<View style={{ marginTop: 100 }}>
 <Text style={styles.scoreStyle}>
  {this.state.totalruns}{'  /  '}{this.state.wickets}
 </Text>
</View>

<View style={{ marginTop: 50 }}>
<Button
 title='PRESS ME'
 onPress={() => { this.displayFunc(); }} />
</View>

<View style={{ flexDirection: 'row', flex: 1, marginTop: 200 }}>
    {this.displayBalls([0])}
</View>

</Image>

    );
  }
}

Answer 1

您能提供更多信息吗？还是完整的代码？（你说了一些关于按钮的内容，但我看不到任何按钮或点击处理程序..）

你在哪里更新州？

加号 - 在你的for循环中，你在第一次迭代中返回一个项目，这意味着循环只有一次迭代，因此返回一个项目

<强>更新

一些似乎导致您的代码无法工作的事情 - 你有点混乱，我认为你打算做那样的事情 -

randomResultFunc() {
        return (Math.floor(Math.random() * (15 - 0)) + 0);
    }

displayFunc() {
        const result = this.randomResultFunc();
        this.checkResult(result);
    }

在你的displayBalls函数中，你总是会在每个球的旁边显示相同的文字（你想要的是什么？），并且要显示5个球，它应该像这样写 -

displayBalls() {

const balls = [] 
 for (let i = 0; i <= 5; i++) {
     balls.push(
    <Image
       source={require('./Images/ballline.png')}
       style={styles.ballStyle} >
       <Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
          {this.state.display}
       </Text>
    </Image>
    );
  }

return balls
}

* display最初定义为数组，但您始终将其设置为单个值..

**另一个一般说明 - 您应该使用this.state.totalruns + result而不是this.state.totalruns += result设置totalruns值，因为您不想直接修改状态，而是使用setState函数

顺便说一句 - 我不太确定我是否完全遵循你的意图，但我希望我能以某种方式提供帮助..

使用循环渲染图像并更新状态并在渲染图像中显示状态值

1 个答案: