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

Question

[Дамир Балгабаев]

Напрмиере у меня есть стор с такими данными:
Page: [
{type: 'Button', label: 'Ok'},
{type: 'Card', label: 'News', Image: 'request...'},
{type: 'TextInput', placeholder: 'Hello'}
];

Эти компоненты необходимо динамический отрендерить на странице. Но напрмиер flatList рендерит компоненты только одного типа. Как такое можно реализовать?

Answer 1

[Александр]

Лучше переделать структуру:

[
	{
		type: 'Button',
		props: {
			label: 'Ok'
		}
	},
	{
		type: 'Card',
		props: {
			label: 'News',
			Image: 'request...'
		}
	},
	{
		type: 'TextInput',
		props: {
			placeholder: 'Hello'
		}
	}
];

Тогда можно будет в методе render сделать так:

{{page.map(element => <element.type {...element.props} />)}}

Comments

[Дамир Балгабаев]

Вы тоже с Астаны?)

[Дамир Балгабаев]

Вот такой еще вопрос, почему Fetch Api возващает непонятный промис?
export const AuthRegistrationUser = async (data) => {
await fetch(`${initialUrl}/register` , {
method: 'POST',
headers: {Accept: 'application/json', 'Content-Type': 'application/json'},
body: JSON.stringify(data)
}).then(response => response.json()).then(responseJson => console.log(responseJson));
};

[Александр]

В async/await по-другому надо работать с обещаниями (промисами).

const some = async () => {
	const response = await fetch(...);
	const data = await response.json();

	return data;
};

[Дамир Балгабаев]

Александр, Так тоже пробывал, тоже самое возвращает

[Александр]

Дамир Балгабаев, Что возвращает? then убирали?