Scroll View仅呈现Text组件,而不是我自己定义的组件

问题描述 投票:0回答:1

这是ScrollView Component的用法。未注释的行有效,但注释的行无效。ScrollView是否仅呈现文本组件?

import { ScrollView,Text ,View} from 'react-native';

import Row from './movies';

export const ScrollViewMovies= (props)=> {

return <ScrollView >{props.movieList.map((movie)=>(<Text key={movie.id}>{movie.movie}</Text> ))}</ScrollView>
// return <ScrollView >{props.movieList.map((movie)=>(<Row movie={movie}/> ))}</ScrollView>

}

行的实现

import React from 'react'
import {TouchableOpacity, Text, View} from 'react-native'


export const Row = (props) => (

     <Text>{props.movie.movie}</Text>


  )

样本movieList如下,它取自OMDB api,我只是打印出其中一些:

Array [
  Object {
    "id": 439882,
    "movie": "Batman v Superman: Dawn of Justice",
  },
  Object {
    "id": 655926,
    "movie": "Superman Returns",
  },
  Object {
    "id": 727328,
    "movie": "Superman",
  },
  Object {
    "id": 409642,
    "movie": "Superman II",
  },
  Object {
    "id": 83858,
    "movie": "Superman III",
  },
  Object {
    "id": 657398,
    "movie": "Superman IV: The Quest for Peace",
  },
  Object {
    "id": 237090,
    "movie": "Superman/Batman: Apocalypse",
  },
  Object {
    "id": 130426,
    "movie": "Superman/Batman: Public Enemies",
  },
  Object {
    "id": 540753,
    "movie": "Lois & Clark: The New Adventures of Superman",
  },
  Object {
    "id": 443319,
    "movie": "Superman/Doomsday",
  },
]
javascript react-native
1个回答
0
投票

首先,尝试将FlatList用于较大的列表。

将行更改为:

export const Row = (movie) => (
    <Text key={movie.id}>{movie.movie}</Text>
) 
© www.soinside.com 2019 - 2024. All rights reserved.