javascript - react native 动态渲染

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>
  );
}