反應本機動態渲染

Question

我正在嘗試制作一個自定義路由器組件，該組件將動態選擇布局。 但是，當我嘗試動態呈現布局時，我收到空白頁。

我做錯了什么？

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import WelcomePageLayout from '../layouts/welcome-page';
import GamePageLayout from '../layouts/game';

export default class Router extends Component {
  constructor(props) {
    super(props);

    this.layouts = [
      WelcomePageLayout,
      GamePageLayout
    ];

    this.state = {
      currentLayout: 0
    };
  }

  render() {
    const layout = this.layouts[this.state.currentLayout];

    return (
      <View style={styles.container}>
        { layout }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    paddingTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 100
  }
});

一步之前，在添加此動態渲染之前，所有功能均按預期工作。 所以我很確定這件事。

提前致謝。

Answer 1

您只是將組件作為子級傳遞給View 。 確保也渲染它：

render() {
  const Layout = this.layouts[this.state.currentLayout];

  return (
    <View style={styles.container}>
      <Layout />
    </View>
  );
}