reactjs 如何使平面列表呈现文本、视图元素？in rn

nhaq1z21 于 2022-12-18 发布在 React

关注(0)|答案(2)|浏览(101)

如何使平面列表渲染文本，视图元素？在rn中，我目前使用滚动视图，但我想测试平面列表我读了rn文档了解它，但我不能渲染文本视图元素与他们的风格，谁能告诉如何以正确的方式做到这一点？我只是想使用平面列表而不是滚动视图
要呈现的元素：

<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>

reactjs

来源：https://stackoverflow.com/questions/74797370/how-to-make-flatlist-render-text-view-elements-in-rn

2条答案

按热度按时间

ha5z0ras1#

您需要将renderItem属性与FlatList一起使用
首先创建函数组件并将其传递给renderItem属性：

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
           data={/*here pass your data*/}
           keyExtractor={(item, index) => index.toString()} // use index better than using item.id
           renderItem={renderItem}
           nestedScrollEnabled={true}
        />

赞(0）回复(0）举报 2022-12-18

rur96b6h2#

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

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}
        
        />

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 如何使平面列表呈现文本、视图元素？in rn

2条答案

相关问题

热门标签

最新问答