有些东西直接调用 React 组件改用工厂或 JSX

如何解决有些东西直接调用 React 组件改用工厂或 JSX

我使用库 react-native-scrollable-tab-view 来实现选项卡视图。

VideoScreen 钩子组件嵌套的 BasicView 选项卡视图钩子组件。

视频屏幕：

import ScrollableTabView from 'react-native-scrollable-tab-view';
import BasicView from './BasicView';

VideoScreen = () => {
  return (
    <ScrollableTabView>
      <BasicView tabLabel={"Basic"} />
    </ScrollableTabView>
  );
};

export default VideoScreen;

基本视图：

BasicView = () => {

// basicVideos is my list array data.

const renderVideos = ({item}) => {
  const {id} = item;

  return (
    <View>
      <Text>{id}</Text>
    </View>
  );
};

return (
    <View>
      <View style={{height: 16}} />
      {basicVideos.map((value,index) => {
        const {id,videos,title} = value;

        return (
          <View key={index} style={{marginBottom: 20}}>
            <Text style={styles.categoryTitle}>{title}</Text>
            <FlatList
              style={styles.flatSection}
              showsHorizontalScrollIndicator={false}
              horizontal={true}
              data={videos}
              renderItem={renderVideos}
              keyExtractor={(item,index) => index.toString()}
            />
          </View>
        );
      })}
    </View>
  );
}

export default BasicView;

代码显示 Warning: Something is calling a React component directly. Use a factory or JSX instead 如果我删除 <FlatList /> ，警告消失了， 但我不知道为什么。如何解决此警告？