如何使Flatlist渲染文本，视图元素?在rn

Question

如何使Flatlist呈现文本，视图元素?在rn，我目前使用滚动视图，但我想测试平面列表我读rn文档了解它，但我不能渲染文本视图元素与他们的风格，有人能告诉如何以适当的方式做到这一点吗?我想用flatlist代替滚动视图

我要渲染的元素:

<View style={styles.section1}>
<Image style={styles.profileimg} source={{ uri: data.profilepic }} />
<Text style={styles.usernameText}>@{data.username}</Text>
<View style={styles.Postrow}>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>UpVotes</Text>
<Text style={styles.UpVote}>{data.upvotes}</Text>
</View>
<View style={styles.verticalLine}></View>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>DownVotes</Text>
<Text style={styles.UpVote}>{data.downvotes}</Text>
</View>
<View style={styles.verticalLine}></View>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>Posts</Text>
<Text style={styles.UpVote}>{data.post.length}</Text>
</View>
</View>
<Text style={styles.decs}>Hello this is des</Text>
</View>
<View style={styles.section1}>
<Text style={styles.postTxt}>Your Posts</Text>
<View style={styles.posts}>
{
data.post.map((item) => {
return (
<Image key={item.id} style={styles.Postimage} source={{ uri: item.postimg }} />
)
})
}
</View>
</View>

Answer 1

您需要使用renderItemprop与FlatList

首先创建函数组件并将其传递给renderItemprop:

const renderItem = (item) => (
<View style={styles.section1}>
<Image style={styles.profileimg} source={{ uri: data.profilepic }} />
<Text style={styles.usernameText}>@{data.username}</Text>
<View style={styles.Postrow}>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>UpVotes</Text>
<Text style={styles.UpVote}>{data.upvotes}</Text>
</View>
<View style={styles.verticalLine}></View>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>DownVotes</Text>
<Text style={styles.UpVote}>{data.downvotes}</Text>
</View>
<View style={styles.verticalLine}></View>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>Posts</Text>
<Text style={styles.UpVote}>{data.post.length}</Text>
</View>
</View>
<Text style={styles.decs}>Hello this is des</Text>
</View>
<View style={styles.section1}>
<Text style={styles.postTxt}>Your Posts</Text>
<View style={styles.posts}>
{
data.post.map((item) => {
return (
<Image key={item.id} style={styles.Postimage} source={{ uri: item.postimg }} />
)
})
}
</View>
</View>
)

在你的屏幕中调用flatlist:

<FlatList
data={/*here pass your data*/}
keyExtractor={(item, index) => index.toString()} // use index better than using item.id
renderItem={renderItem}
nestedScrollEnabled={true}
/>

Answer 2

你可以使用下面的代码:-

const renderItem=({item,index})=>{
return(
<View style={styles.section1}>
<Image style={styles.profileimg} source={{ 
uri:item.profilepic}} />
<Text style={styles.usernameText}>@{item.username}</Text>
<View style={styles.Postrow}>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>UpVotes</Text>
<Text style={styles.UpVote}>{item.upvotes}</Text>
</View>
<View style={styles.verticalLine}></View>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>DownVotes</Text>
<Text style={styles.UpVote}>{item.downvotes}</Text>
</View>
<View style={styles.verticalLine}></View>
<View style={styles.Postrow1}>
<Text style={styles.followerTxt}>Posts</Text>
<Text style={styles.UpVote}>{item.post.length}</Text>
</View>
</View>
<Text style={styles.decs}>Hello this is des</Text>
</View>
<View style={styles.section1}>
<Text style={styles.postTxt}>Your Posts</Text>
<View style={styles.posts}>
{
item.post.map((item) => {
return (
<Image key={item.id} style={styles.Postimage} source={{ uri: item.postimg }} />
)
})
}
</View>
</View>
)
}
<FlatList
data={your_data}
keyExtractor={item=>item.id}
renderItem={renderItem}

/>