这是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",
},
]
首先,尝试将FlatList
用于较大的列表。
将行更改为:
export const Row = (movie) => (
<Text key={movie.id}>{movie.movie}</Text>
)