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

本文介绍了是否可以在React Native中动态创建组件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

{type：linearlayout，subviews：[{type：text，fields：{text：这是文本字段}，style：{color：，textSize：14 } }，{type：button ，fields：{text：JUST BUTTON}，transition：{name：http： /www.link} }，{type：text，fields：{text：This是另一个文本字段}，样式：{color：，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> ）; } （这个））; return（< Container theme = {theme}> < Image source = {require（'../../../ images / grad- bg.png'）} style = {background}> < Content style = {scrollContent}> {productList} < / Content> < / Image> < / Container> ）} pre>

希望这段代码能给你一个想法。你可以适应你的情况。

Is it possible to dynamically create and add view components in React Native? For example, firstly I have only empty screen and information of all views come from server in JSON, and then it is need to generate them on the screen. For example - application getting json from server. This json describes the screen that have to be builded:

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

So, by that JSON I need dynamically views building in React Native. But I can't see any ability to write JS code inside JSX - only static views and dynamically changing of props

解决方案

Yes this is possible. Assume that you retrieve your JSON data successfully and save it to some state then in your render function you can use it like that;

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> ) }

I hope this code piece give you an idea. You can adapt it to your case.