Блог

Возможно ли динамически создавать компоненты и отображать их в 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
        }
    }]
}
  

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

Внутри цикла создайте условия на основе элемента и передайте динамическое значение независимо от того, что вы получаете из файла 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>
    )
}