以编程方式添加子视图

时间:2017-04-27 13:23:33

标签: react-native

我正在尝试创建一个网格,我想在循环中执行此操作。这里有一些明显不起作用的代码。我坚持的部分是什么应该“查看[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>
    );
}

2 个答案:

答案 0 :(得分:5)

我通过使用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>
    );
}

答案 1 :(得分:2)

看看这里:https://stackoverflow.com/a/35471984/6700624

这可以帮助你做你想做的事。