Можно ли динамически визуализировать компоненты в React Native? - PullRequest
Новая
       1

Можно ли динамически визуализировать компоненты в React Native?

0 голосов
/ 24 апреля 2019

Можно ли динамически создавать компоненты и отображать их в React-Native?Я хочу прочитать данные из файла 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"
        },
        "styles": {
            "color": "",
            "textSize": 18
        }
    }]
}

1 Ответ

0 голосов
/ 24 апреля 2019

В соответствии с вашими требованиями, в первую очередь вы должны импортировать все необходимые элементы вручную на страницу, затем вам нужно создать состояние с пустым массивом, а затем вызвать цикл через компонент, который был монтирован или куда вы хотите визуализировать данные..

Внутри цикла создайте условия на основе элемента и передайте динамическое значение независимо от того, что вы получаете из файла json. 

var data = {
    "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"
        },
        "styles": {
            "color": "",
            "textSize": 18
        }
    }]
}

import {
    View,
    TextInput,
    Button,
} from 'react-native';


constructor(props){
    super(props);
    this.state = {
        itemstorender: [],
    }
}

componentDidMount() {
    this.renderData();
}

renderData = () => {
    for(var i = 0; i<data.subviews.length; i++){
        if(data.subviews[i].type == "text"){
            this.setState({
                itemstorender: this.state.itemstorender.concat([
                    <TextInput
                        style = {data.subviews[i].styles}
                        placeholder = data.subviews[i].fields.text
                    />
                ])
            })
        }else if(data.subviews[i].type == "button"){
            this.setState({
                itemstorender: this.state.itemstorender.concat([
                    <Button
                      onPress={alert('ok')}
                      title=data.subviews[i].fields.text
                    />
                ])
            })
        }
    }
}

render() {
    return (
        <View>
            { this.state.itemstorender }
        </View>
    )
}
...