Question

我有一个React组件（Highlight.js），它接受两个属性，即 image 和 description 。用户将使用自己的背景图像和说明在4个不同的屏幕上滑动，作为该应用程序的介绍。

TestScreen.js是我设置屏幕之间导航逻辑的地方。当我尝试将AppContainer中的屏幕设置为Highlight组件时，我不断收到以下错误消息：“路线'Page1'的组件必须是React组件。

我已经尝试了很多代码，以查看如何设法使其正常工作，而唯一的方法是当我不提及image和description属性时，在这种情况下都不会显示屏幕几乎是空白。

Highlight.js

import React, { Component } from 'react';
import { View, Text, Image, ImageBackground } from 'react-native';

import { NextButton } from '../Buttons';

import styles from './styles';

export default class Highlight extends Component {
  render() {
    return (
      <ImageBackground style={styles.container}>
        <Image
          style={styles.image}
          source={this.props.image} // the image goes here
          resizeMode="cover"
        />
        <View style={styles.textContainer}>
          <Text style={styles.text1}>MYAPP</Text>
          <Text style={styles.text2}>Highlights</Text>
          <Text style={styles.text3}>{this.props.description}</Text> // the description goes here
        </View>
        <View style={styles.buttonContainer}>
          <NextButton />
        </View>
      </ImageBackground>
    );
  }
}

TestScreen.js

import React, { Component } from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';

import { Highlight } from '../components/Highlights';

export default class TestScreen extends Component {
  render() {
    return <AppContainer />;
  }
}

const AppContainer = createAppContainer(
  createStackNavigator({
    Page1: {
      screen: (
        <Highlight
          image={require('../components/Highlights/images/highlight1.png')}
          description={
            'Avoid No-Show of Candidates after setting up an interview'
          }
        />
      )
    }
  })
);

我希望屏幕显示带有图像和描述属性的内容。目前，我有4个单独的组件，它们的代码基本相同（图像和说明除外）。我该如何解决这个问题并避免重复代码？

Answer 1

简要说明

您要将元素传递给路线，而不是组件本身

() => (<Highlight ... />)

这将创建一个新的函数Component，该函数返回您期望的元素，这就是它起作用的原因

路线“ ...”的组件必须是React组件

1 个答案: