以编程方式添加子视图

Question

我正在尝试创建一个网格,我想在循环中执行此操作.这里有一些明显不起作用的代码.我坚持的部分是什么应该"查看[j] .addView"来向父母添加视图？

我在文档中找不到关于这样做的任何内容,但我认为它可能以某种方式.如果没有,还有另一种方法可以达到这个目的吗？

谢谢!

render() {
    var views = [];

    for(let j=0;j < 5; j++) {
        views.push(<View style={{flex:1, flexDirection:'row'}}></View>)

        for (let i = 0; i < 5; i++) {
            views[j].addView(
                <View style={styles.box}>
                    <View style={styles.innerBox}/>
                </View>
            )
        }
    }

    return (
        <View style={{flex:1, flexDirection:'column'}}>
            {views}
        </View>
    );
}

Answer 1

通过使用flexWrap,我能够达到我想要的结果.

render() {
    let views = [];

    for(let j=0;j < this.props.cellCount; j++) {
        views.push(
            <View key={j} style={styles.box}>
                <View style={styles.innerBox}/>
            </View>
        )
    }

    return (
        <View {...this.props}>
            <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
                { views }
            </View>
        </View>
    );
}