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

Question

我使用该库 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 insteadIf I remove <FlatList />，警告消失了，但我不知道为什么。如何解决此警告？

标签： reactjsreact-nativejsx