Javascript Can'；t在React Natvie中显示其他组件

我在应用程序主页中有

组件，我试图在其上方放置一个

，但它没有显示。在我的例子中，React Native似乎只显示了最后一个组件。我已经通过在

之后放置

对其进行了测试，并且图像显示没有问题，但正如我告诉

flatlist

消失，因为这不是home Function类中的最后一个组件，这是我的主页代码

import React from 'react';
import {StyleSheet,View,Text,Image,FlatList} from 'react-native';


const DATA = [
    {
      id: '1',
      title: 'Icon 1',
      image: 'https://example.com/icon1.png',

    },
    {
      id: '2',
      title: 'Icon 2',
      image: 'https://example.com/icon2.png',

    },
    {
      id: '3',
      title: 'Icon 3',
      image: 'https://example.com/icon3.png',

    },
    {
      id: '4',
      title: 'Icon 4',
      image: 'https://example.com/icon4.png',
      },
  ];

export default function Home(){   

    return(
      <Image style={styles.banner} source={{uri: 'https://example.com/banner.jpg'}} />,
      
      <FlatList
      data={DATA}
      numColumns={'2'}
      keyExtriactor={(item) => item.id}
      renderItem={({ item }) => {
        return (

            <View style={styles.container}>
                {item.image && (
                    <Image style={styles.image} source={{ uri: item.image }}></Image>
                )}

                {item.title && (
                <Text>{item.title}</Text>
                )}

              </View>        
        );
      }}
    />
    
    );
      
}

const styles = StyleSheet.create({
    container:{
        marginTop:20,
        padding:20,
    },
    image:{
        width:70,
        height:50,
    },
    banner:{
      width:400,
      height:200,
      marginTop:10
    }

})

从“React”导入React；
从“react native”导入{样式表、视图、文本、图像、平面列表}；
常数数据=[
{
id:'1'，
标题：“图标1”，
图像：'https://example.com/icon1.png',
},
{
id:'2'，
标题：“图标2”，
图像：'https://example.com/icon2.png',
},
{
id:'3'，
标题：“图标3”，
图像：'https://example.com/icon3.png',
},
{
id:'4'，
标题：“图标4”，
图像：'https://example.com/icon4.png',
},
];
导出默认函数Home（）{
返回(
,
项目id}
renderItem={（{item}）=>{
返回(
{item.image&&(
)}
{item.title&&(
{item.title}
)}
);
}}
/>
);
}
const styles=StyleSheet.create({
容器：{
玛金托普：20，
填充：20，
},
图片：{
宽度：70，
身高：50，
},
横幅：{
宽度：400，
身高：200，
玛金托普：10
}
})

在

主页

功能组件中尝试以下操作：

export default function Home() {
  return (
    <>
      <Image
        style={styles.banner}
        source={{ uri: "https://example.com/banner.jpg" }}
      />

      <FlatList
        data={DATA}
        numColumns={"2"}
        keyExtriactor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              {item.image && (
                <Image
                  style={styles.image}
                  source={{ uri: item.image }}
                ></Image>
              )}

              {item.title && <Text>{item.title}</Text>}
            </View>
          );
        }}
      />
    </>
  );
}

导出默认函数Home（）{
返回(
项目id}
renderItem={（{item}）=>{
返回(
{item.image&&(
)}
{item.title&&{item.title}
);
}}
/>
);
}

---

您的代码返回两个JSX元素，这可能就是问题所在。它应该只返回一个JSX元素

问题在于返回语句：

返回(
)

您应该始终返回单个组件或组件数组。 在这种情况下，您有两种选择：

。。。
返回[
,
]

或

。。。
返回(
)

您可以使用任何其他组件来代替

，例如

视图

，但请记住，您应该始终返回单个组件

---

或组件数组。

返回语句不正确，这就是组件未正确呈现的原因。每个屏幕/组件应包装在视图中

export default function Home() {
  return (
    <View>
      <Image
        style={styles.banner}
        source={{ uri: "https://example.com/banner.jpg" }}
      />

      <FlatList
        data={DATA}
        numColumns={"2"}
        keyExtriactor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              {item.image && (
                <Image
                  style={styles.image}
                  source={{ uri: item.image }}
                ></Image>
              )}

              {item.title && <Text>{item.title}</Text>}
            </View>
          );
        }}
      />
    </View>
  );
}

导出默认函数Home（）{
返回(
项目id}
renderItem={（{item}）=>{
返回(
{item.image&&(
)}
{item.title&&{item.title}
);
}}
/>
);
}

一个更优雅的解决方案是添加

FlatList

prop

ListHeaderComponent

，将图像（或任何您想要的）放在所有项目的顶部

export default function Home() {
  return (
      <FlatList
        data={DATA}
        numColumns={2}
        keyExtractor={(item) => item.id}
        ListHeaderComponent={(
         <Image
           style={styles.banner}
           source={{ uri: "https://example.com/banner.jpg" }}
         />
        )}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              {item.image && (
                <Image
                  style={styles.image}
                  source={{ uri: item.image }}
                ></Image>
              )}

              {item.title && <Text>{item.title}</Text>}
            </View>
          );
        }}
      />
  );
}

导出默认函数Home（）{
返回(
项目id}
列表头组件={(
)}
renderItem={（{item}）=>{
返回(
{item.image&&(
)}
{item.title&&{item.title}
);
}}
/>
);
}

哦，很好，这很有效，所以您定义了一个父组件，并将其余组件作为父组件的子组件，对吗？是的。您是正确的，您可以使用任何其他不必要的组件

，只要您只返回一个组件