Как изменить реагировать родной макет приложения из API

Question

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

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

Answer 1

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

import React, { PureComponent } from 'react';
import { AppRegistry } from 'react-native';

import Layout1 from './components/Home/Layout1';
import Layout2 from './components/Home/Layout2';
import Layout3 from './components/Home/Layout3';
import Layout4 from './components/Home/Layout4';
import Loading from './components/Loading';

class HomePage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      layout: null
    };
  }

  async componentDidMount() {
    const response = await fetch('https://example.com/wp-json/whatever-api-endpoint')
      .then(r => r.json());

    this.setState({
      layout: response
    });
  }

  getContentElement = () => {
    switch (this.state.layout) {
      case 'layout_1': return <Layout1 />;
      case 'layout_2': return <Layout2 />;
      case 'layout_3': return <Layout3 />;
      case 'layout_4': return <Layout4 />;
      default: return <Loading />
    }
  };

  render() {
    const contentElement = this.getContentElement();
    return (
      <View>
        {contentElement}
      </View>
    );
  }
}
AppRegistry.registerComponent('MyApp', () => HomePage);