javascript - Why does the following code show nothing?

Question

I am trying to learn react-native and is stuck at this point. The following code do not display anything, however if I move the content of the renderArticles inside the return method of the App function, it seems to work again.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


const ARTICLES = [
  { id: '1', uri: require('./assets/1.jpg')},
  { id: '2', uri: require('./assets/2.jpg')},
  { id: '3', uri: require('./assets/3.jpg')},
  { id: '4', uri: require('./assets/4.jpg')},
  { id: '5', uri: require('./assets/5.jpg')},
];

export default function App() {
  const renderArticles = () => {

    ARTICLES.map( (item) => {
      return (
        <View>
          <Text>Lorem Ipsum</Text>
        </View>
      );
    })
}

  return (
    <View style={styles.container}>
     {renderArticles}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

What am I missing here?

Answer 1

等待大神答复