时间戳

首页 > 解决方案 > 如何在 React Native 中将函数用作 rxjs 元素？

reactjs - 如何在 React Native 中将函数用作 rxjs 元素？

问题描述

我有一个单独的函数类，它接受参数，这个参数做一些处理，最后通过这个处理的数据返回一个平面列表。我想在我的 App.js 中调用此函数并将其用作渲染元素。我怎样才能做到这一点？

这是我的 ViewPhoto 课程

import React, {Component} from 'react';
import {
View,
Platform,
FlatList,
Image,
} from 'react-native';
import {styles} from './Styles';

const ViewPhoto = ({imageData}) => {

    let imageList = [];
  
    for (let i = 0; i < Object.keys(imageData).length; i++) {
        console.log('saymaya basladi');
        let data = imageData[String(i)];
        let image = {
            id: String(i),
            contentType: data.mime,
            fileSize: data.size,
            filePath: data.path,
        };

        if (Platform.OS === 'ios') {
            image.fileName = data.filename;
        } else {
            let path = data.path.split('/');
            image.fileName = path[path.length - 1];
        }

        imageList.push(image);
    }

    return (
        <View style={styles.imageViewerContainer}>
            <View style={styles.imageContainer}>
                <FlatList
                    data={this.state.imageList}
                    numColumns={2}
                    renderItem={({item}) => (
                        <Image style={styles.image} source={{uri: item.filePath}} />
                    )}
                    keyExtractor={item => item.id}
                />
            </View>
        </View>
    );

};

这是我的 App.js

import React from 'react';
import {ViewPhoto} from './ViewPhoto';
export default class App extends React.Component{

constructor() {
    super();
    this.state = {         
        profilePic:[]
    }
} 

render() {
    return (       
        <View>             
         <ViewPhoto imageData={this.state.profilePic}></ViewPhoto>
       </View> )}
}

当我使用它时，我得到了这个错误。

未处理的 JS 异常：不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

标签： reactjsreact-nativerxjs

解决方案

看起来你错过了导出功能组件。更改 ViewPhoto 中的以下行：

const ViewPhoto = ({imageData}) => {

至

export default const ViewPhoto = ({imageData}) => {

推荐阅读