我正在尝试在React Native .53.3中为我的应用在屏幕上呈现一定数量的图像。我通过导航器传递了我想要的图像数量(它们是相同的图像),然后将该支柱传递给javascript函数,该函数随机生成图像的顶部/左侧坐标。
这就是出错的地方:屏幕无法访问。屏幕上的按钮不起作用 - 它甚至不会注册按下 - 因此带有图像的屏幕永远不会呈现。
如果我在while循环之前插入一个return语句,那么脚本运行正常,我甚至可以导航到图像屏幕。所以我认为这个问题与循环有某种关系。我是一个JS新手,但我认为我的代码看起来都很好,正确... 这是有问题的剧本:
import { Dimensions } from 'react-native';
export function barGeneration(n) {
var barCoords = [];
var noZone = [{
x: Dimensions.get('window').width / 2,
y: Dimensions.get('window').height / 2
}];
while (barCoords.length < n) {
var left = ((Dimensions.get('window').height) - 101) * Math.random();
var top = (Dimensions.get('window').width - 101) * Math.random();
var validX = true;
var validY = true;
for (var i = 0; i < noZone.length; i++) {
if (left > noZone[i].x - 101) {
validX = false;
}
else if (left < noZone[i].x + 101) {
validX = false;
}
if (top > noZone[i].y - 101) {
validY = false;
}
else if (top > noZone[i].y + 101) {
validY = false;
}
}
if (validX && validY) {
barCoords.push({
top: top,
left: left,
rot: Math.random()*360 + 'deg'
});
noZone.push({
x: left,
y: top,
});
validX = false;
validY = false;
}
}
return barCoords;
}
以下是调用脚本的地方:
componentWillMount() {
// assigning constant coordinate values to junk bars
var barCoords = barGeneration(this.props.navigation.state.params.n);
this.setState({barCoords: barCoords});
从无效按钮导航:
<Button
raised
backgroundColor='#CCC'
color='black'
iconRight={{name: 'arrow-right', type: 'feather'}}
onPress={() => this.props.navigation.navigate('PracticeTrial2', {n:2, count:0, scores:[]});}
title='Start Practice: Memory for 2 items'
/>