【问题标题】:ListItem is not rendering in FlatList of React NativeListItem 未在 React Native 的 FlatList 中呈现
【发布时间】:2021-03-25 23:39:38
【问题描述】:

我想在 flatlist 中渲染 2 个按钮,但这样做会显示我在 O/p 中提到的错误。但是我渲染了一个 Text 组件来代替 Button 然后它渲染了

const [formValue,setValue]=React.useState(
                                          [
                                            {
                                                p_id:0,
                                                projectName:'Project Name',
                                                task:'Task Details',
                                                date:'Date',
                                                startTime:'Start Time',
                                                endTime:'End Time',
                                                hrs:'Total Hrs',
                                                edit: <View>
                                                        <Button title="Edit Status" />
                                                        <Button title="Delete Status" />
                                                      </View>
                                                            
                                              }
                                           ]

                                          )

     <FlatList scrollEnabled={true} 
      showsVerticalScrollIndicator={false}
      keyExtractor={keyExtractor}
      data={formValue}
      renderItem={({item,index}) => (
                              <ListItem>
                                <ListItem.Content   key={item.p_id}>
                                  
                                  <ListItem.Title>  
                                    {item.projectName}
                                  </ListItem.Title>

                                  <ListItem.Title>  
                                    {item.task}
                                  </ListItem.Title> 

                                  <ListItem.Title>  
                                    {item.startTime}
                                  </ListItem.Title>

                                  <ListItem.Title>  
                                    {item.startTime}
                                  </ListItem.Title>

                                  <ListItem.Title>  
                                    {item.endTime}
                                  </ListItem.Title>
                                 
                                  <ListItem.Title>  
                                    {item.edit}    {/* Problem is here as it is not rendering in 
                                                      React native*/}
                                  </ListItem.Title> 

                                </ListItem.Content>   
                              </ListItem> 
                          )
                       }    
       />   

O/p: 不能添加没有任何主要功能的瑜伽节点

请给我一些解决方案。提前致谢。

【问题讨论】:

标签: react-native flatlist


【解决方案1】:

您可以尝试在渲染项中使用 View

<FlatList
          data={formValue}
          renderItem={({ item }) => (
            <View>
                <Text>{ item.projectName }</Text>
                <Text>{ item.task }</Text>
                ....
                { item.edit } // render view
            </View>
          )}
          ....

/>

【讨论】:

    猜你喜欢
    • 2019-03-17
    • 1970-01-01
    • 2020-03-10
    • 2020-06-20
    • 2019-06-17
    • 2019-05-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多