调用JS函数冻结反应原生

时间:2018-02-23 22:01:28

标签: javascript reactjs react-native

我正在尝试在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'
/>

0 个答案:

没有答案
相关问题