Question

我正在尝试像本网站https://www.npmjs.com/package/react-native-searchable-dropdown那样在react native中创建可搜索的下拉列表。他们在App.js中做到了，而我在FriendRequests.js中做到了。我已经通过npm install --save react-native-searchable-dropdown进行了安装。

启动npm后，我在红色背景下收到此错误：

这是Home.js或FriendRequests.js中的问题。这是我的FriendRequests.js文件：

import React, { Fragment, Component } from 'react';
import SearchableDropdown from 'react-native-searchable-dropdown';


var items = [
{
  id: 1,
  name: 'JavaScript',
},
{
  id: 2,
  name: 'Java',
},
...
{
  id: 7,
  name: 'Go',
},
{
  id: 8,
  name: 'Swift',
},
];

class FriendRequests extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      selectedItems: [
        {
          id: 7,
          name: 'Go',
        },
        {
          id: 8,
          name: 'Swift',
        }
      ]
    }
}

render() {

return (
    <Fragment>                  
                <SearchableDropdown
                    onItemSelect={(item) => {
                    const items = this.state.selectedItems;
                    items.push(item)
                    this.setState({ selectedItems: items });
                    }}

                    onRemoveItem={(item, index) => {
                    const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
                    this.setState({ selectedItems: items });
                    }}

                    items={items}
                    defaultIndex={2}
                    resetValue={false}
                    textInputProps={
                    {
                        placeholder: "placeholder",
                        underlineColorAndroid: "transparent",
                        onTextChange: text => alert(text)
                    }
                    }
                    listProps={
                    {
                        nestedScrollEnabled: true,
                    }
                    }
                />
    </Fragment>
)
}
}

任何人都可以帮助我解决此错误。

这是我的Home组件：

import React, { useState, useEffect, useReducer } from 'react';
import { useAuth } from "@providers/AuthProvider";
import { Block, Button } from "galio-framework";
import { StyleSheet, Dimensions, FlatList, View, Animated } from 'react-native';
import * as theme from '@utils/theme';
import { NewPostCard } from '@components/Post/NewPostCard';
import { Post } from '@components/Post/Post';
import { useApi } from '@providers/ApiProvider';
const { width } = Dimensions.get('window');
import update from 'immutability-helper';
import { NavigationEvents } from 'react-navigation';

function initState ( ) {

return {
    page: 1,
    posts: []
}

}

function postReducer ( state, action ) {

switch( action.type ) {
    case 'set-posts': {
        state = {
            posts: action.payload.data,
            page: action.payload.page
        }
        return state;
    }
    case 'update-post': {
        const index = state.posts.findIndex( x => x.id === action.payload.id 
);
        if ( index > -1 ) {
            const oldPost = state.posts[index];
            const newPost = { ...oldPost, ...action.payload };
            state = {
                posts: update( state.posts, {
                    $splice: [[ index, 1, newPost ]]
                } ),
                page: action.payload.page
            }
        }
        return state;
    }
    case 'add-posts': {
        state = {
            posts: update(state.posts, { $push: action.payload.data } ),
            page: action.payload.page
        }
        return state;
    }
    case 'reset': {
        return initState( action.payload );
    }
    default:
        return state;
}

}

export function HomeScreen() {

const { fetch } = useAuth();
const { get, post: apiPost } = useApi();
const [isLoading, setIsLoading] = useState(true);
const [ state, dispatch ] = useReducer( postReducer, { page: 1, posts: [] }, initState );
const [showNewPostCard, setShowNewPostCard ] = useState( false );

function fetchPosts ( page ) {
    setIsLoading( true );
    if ( !page ) {
        dispatch({ type: 'reset' })
    }
    get('/posts', {
        params: {
            page: page || 1,
            limit: 15
        }
    })
    .then( data => {
        setIsLoading( false );
        if ( page && page > state.page ) {
            dispatch({ type: 'add-posts', payload: { ...data, page } })
        } else {
            dispatch({ type: 'set-posts', payload: data })
        }
    } )
}

function likePost ( post ) {

    apiPost(`/posts/${post.id}/likes`)
    .then( res => {
        return get(`/posts/${post.id}`)
    } )
    .then( ( data ) => {
        dispatch({ type: 'update-post', payload: data })
    } )

}

function commentPost ( content, post ) {

    apiPost(`/posts/${post.id}/comments`, {
        content
    })
    .then( ( data ) => {
        return get(`/posts/${post.id}`)
    } )
    .then( ( data ) => {
        dispatch({ type: 'update-post', payload: data })
    } )

}

useEffect(() => {

    fetch();

}, []);

return (
    <Block flex style={{ paddingHorizontal: theme.SIZES.BASE * 0.5 }}>
        <NavigationEvents
            onWillFocus={ ( ) => fetchPosts() }
        ></NavigationEvents>
        <FlatList 
            ItemSeparatorComponent={ () => 
                <Block style={{paddingHorizontal: theme.SIZES.BASE * 0.5}}>
                    <View style={[styles.separator]} />
                </Block>
            }
            ListHeaderComponent={ ( ) => {
                return (
                    <Block style={{padding: theme.SIZES.BASE * 0.5 }}>
                        <NewPostCard></NewPostCard>
                    </Block>
                )
            } }
            initialNumToRender={3}
            style={styles.postlist}
            data={state.posts}
            onRefresh={fetchPosts}
            onEndReached={ ( num ) => fetchPosts( state.page++ )}
            onEndReachedThreshold={ 0.5 }
            refreshing={isLoading}
            keyExtractor={item => item.id}
            renderItem={({item, index, separators}) => (
                <Block style={{padding: theme.SIZES.BASE * 0.5 }}>
                    <Post item={item} 
                    onPostLike={ ( post ) => {
                        likePost( post )
                    } }
                    onCommentPost={ ( comment, post ) => {
                        commentPost(comment, post);
                    }}></Post>
                </Block>
            )}>
        </FlatList>
    </Block>
);

}

const styles = StyleSheet.create({
separator: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(0,0,0,.2)',
    marginVertical: theme.SIZES.BASE * 0.5
},
postlist: {
    marginTop: theme.SIZES.BASE,
    marginHorizontal: -(theme.SIZES.BASE * 0.5),
    height: 100,
    minHeight: 100
},
divider: {
    borderRightWidth: 0.3,
    borderRightColor: theme.COLORS.ICON,
},
tab: {
    backgroundColor: theme.COLORS.TRANSPARENT,
    width: width * 0.5,
    paddingVertical: 20,
    borderRadius: 0,
    borderWidth: 0,
    height: 24,
    elevation: 0,
},
options: {
    marginBottom: 30,
    marginTop: 20,
    elevation: 4,
},
tabTitle: {
    lineHeight: 19,
    fontWeight: '400',
    color: theme.COLORS.SECONDARY
},
})

Answer 1

更改主函数声明来自

export function HomeScreen() { ...

export const HomeScreen = props => { ...

因为您只能在功能组件内部使用钩子，而react-navigation只允许React组件不起作用

如何清除此错误：错误：路线“ Home”的组件必须是React组件

1 个答案: