组件未在本机反应中显示答案

【问题标题】：Component not showing in react native组件未在本机反应中显示
【发布时间】：2021-03-27 18:18:39
【问题描述】：

我有一个 FlatList，它为列表中的每个项目呈现一个名为 features 的组件。我在列表中有几个项目。但是，列表没有显示。这是代码，平面列表中有一个名为 renderItem 的 renderItem，它返回我们要显示的 Featured 组件：

import * as React from 'react';
import { FlatList, StyleSheet, TextInput, Image, Button, Pressable } from 'react-native';
//import { connect } from 'react-redux';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import Featured from '../components/Featured';
//import getFeatured from "../"
export default function TabOneScreen(props) {
    const renderItem = ({item}) => {
      return (<Featured
        artistName= {item.artistName}
        mediaName= {item.mediaName}
        uri={item.uri}
        />
        );}
    // useEffect(() => {
    //   getFeatured();
    // })
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Discover Music to Own</Text>
        <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
          <TextInput style={styles.searchbar}
          placeholder="Search Music to Own"/>
          <FlatList
          data={props.featured}
          renderItem={renderItem}
          keyExtractor={item => item.mediaName}/>
      </View>
  )
}


const featured = [{uri:"https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
                   artistName:"Beyonce",
                   mediaName:"Good Album Name",
                   videoUri:'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
                 },
                  {uri:"https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
                   artistName:"Beyonce",
                   mediaName:"Good Album Name1",
                 videoUri:'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
               },
                  {uri:"https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
                   artistName:"Beyonce",
                   mediaName:"Good Album Name2",
                 videoUri:'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
               }]

如何显示列表？

【问题讨论】：

标签： react-native

【解决方案1】：

我已使用您的本地 featured 变量来渲染 FlatList，它对我来说效果很好，请检查您是否在 props 中传递了 featured。我删除了您的一些本地组件以使其正常工作。

import * as React from 'react';
import { FlatList, TextInput, Text, View } from 'react-native';

export default function App(props) {
  const renderItem = ({ item }) => {
    return (<Text>{item.artistName}</Text>);
  };

  return (
    <View>
      <Text>Discover Music to Own</Text>
      <View />
      <TextInput
        placeholder="Search Music to Own" />
      <FlatList
        data={featured}
        renderItem={renderItem}
        keyExtractor={item => item.mediaName} />
    </View>
  );
}


const featured = [{
  uri: "https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
  artistName: "Beyonce",
  mediaName: "Good Album Name",
  videoUri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
},
{
  uri: "https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
  artistName: "Beyonce",
  mediaName: "Good Album Name1",
  videoUri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
},
{
  uri: "https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
  artistName: "Beyonce",
  mediaName: "Good Album Name2",
  videoUri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
}]

【讨论】：