如何从 api 更改本机应用程序布局答案

【问题标题】：How to change react native app layout from api如何从 api 更改本机应用程序布局
【发布时间】：2019-10-22 04:19:47
【问题描述】：

我开发了一个商店应用程序，我的老板想要一个功能，从 wordpress 面板中选择预定义的布局来更改整个设计并选择哪个类别是第一个或......

我已经创建了所有需要的设计和组件，但我不知道如何更改从 api 收到的应用程序布局，是否有任何代码或帮助。此更改与颜色无关，它与更改整个主页应用程序布局有关对不起我的英语

【问题讨论】：

【解决方案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);

【讨论】：