是否可以在React Native中动态创建组件？

是否可以在React Native中动态创建和添加视图组件？
例如,首先我只有空屏幕,所有视图的信息都来自 JSON中的服务器,然后需要在屏幕上生成它们.
例如 – 应用程序从服务器获取json.这个json描述了必须构建的屏幕：

{
    "type": "linearlayout","subviews": [{
        "type": "text","fields": {
            "text": "This is text field"
        },"styles": {
            "color": "","textSize": 14
        }
    },{
        "type": "button","fields": {
            "text": "JUST BUTTON"
        },"transition": {
            "name": "http://www.link.com"
        }
    },{
        "type": "text","fields": {
            "text": "This is another text field"
        },"textSize": 18
        }
    }]
}

所以,通过JSON,我需要在React Native中动态构建视图.但我看不到任何在JSX中编写JS代码的能力 – 只有静态视图和动态更改道具

是的,这是可能的.假设您成功检索JSON数据并将其保存到某个状态,然后在渲染功能中可以像这样使用它;

render() {
    var productList = [];

        this.state.data.products.forEach(function (tmpProduct) {
            productList.push(
                <View style={cardView} key={tmpProduct.id}>

                    <Grid style={upperGrid}>
                        <Col style={{flex: 0.5}}>
                            <Thumbnail
                                source={require('../../../images/sample-image.png')}
                                style={itemThumb}>
                        </Col>
                        <Col>
                            <Text style={cardItemHeader} numberOfLines={2}>{tmpProduct.title}</Text>
                            <Text style={cardItemBody} numberOfLines={2}>{tmpProduct.description}</Text>
                        </Col>
                    </Grid>
                </View>
            );
        }.bind(this));

    return (
        <Container theme={theme}>
            <Image source={require('../../../images/grad-bg.png')} style={background} >

                <Content style={scrollContent}>

                    {productList}

                </Content>

            </Image>
        </Container>
    )
}

我希望这段代码能给你一个想法.您可以根据您的情况进行调整.

是否可以在React Native中动态创建组件？

猜你在找的React相关文章