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

反应本机动态渲染

1 个答案: