Android 搜索时无法呈现平面列表

我有一个列表视图，其中列表项组件由我设计。 如果我单独渲染listItem，它可以正常工作，但在与搜索栏集成后，我无法渲染它们，即使我能够获得与特定搜索匹配的对象

SearchListItem

从“React”导入React；
从“react native”导入{图像、文本、视图}；
导出默认类SearchListItem扩展React.Component
{
render（）
{
返回(
{this.props.text}
)
}
}

App.js

从“React”导入React；
从“react native”导入{FlatList，StyleSheet，Text，TextInput，View}；
从“/components/SearchListItem”导入SearchListItem；
从“react native elements”导入{SearchBar}；
从“lodash”导入{includes}；
导出默认类App扩展React.Component{
建造师（道具）
{
超级（道具）；
此。所有类别=[
{
“id”：“1”，
“文本”：“abc”，
“src”：https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg“
},
{
“id”：“2”，
“文本”：“dbef”，
“src”：https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg“
},
{
“id”：“3”，
“文本”：“bghi”，
“src”：https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg“
},
{
“id”：“4”，
“文本”：“jbkl”，
“src”：https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg“
}
];
this.state={text:“”，
类别：[]
}
}
搜索（文本）
{
var搜索结果=[]；
var categories=这是所有类别；
对于（var i=categories.length-1；i>=0；i--）
{
包括（类别[i]['text']，text）和&searchResults.push（类别[i]）
}
console.log（“搜索的文本为”+文本）；
console.log（搜索结果）；
返回搜索结果；
}
_keyExtractor=（项，索引）=>item.id；
_renderItem（项目）
{
console.log（“要呈现的项目”）；
控制台日志（项目）；
回来
}
render（）{
控制台日志（“呈现”）；
console.log（“要显示的类别是”）；
log（this.state.categories）；
返回(
{
让result=this.search（文本）；
console.log（“更改状态”）；
this.setState（{categories:result，text:text}）
}}
值={this.state.text}
/>
)
}
}

---

搜索会给出所有有效结果，但无法显示与结果对应的列表。我做错了什么？

运行代码时，我发现了两个小错误： 第一个是在

\u renderItem

param中，它必须是

_renderItem({item})
{
    console.log("item to render is");
    console.log(item);
    return <SearchListItem text={item.text} src={item.src}/>
}

\u renderItem（{item}）
{
console.log（“要呈现的项目”）；
控制台日志（项目）；
回来
}

正如分解建议的那样（）

第二个原因导致列表无法呈现： 尝试删除FlatList道具中的

style={{{flex:1}}

---

我刚刚创建了一个，如果你想检查它的话：

非常感谢：-），我理解解构错误，但是flex:1中的错误是什么？一个很好的问题。目前，您无法将样式属性传递给平面列表，但如果您的目标是适应屏幕高度，则可以使用

contentContainerStyle={{flexGrow:1}}

并将

flex:1

应用于父视图。我已经更新了点心，看一看：）哦，kk，谢谢：-）但是你认为是什么原因导致没有展示？我真的不知道

import React from 'react';
import {FlatList, StyleSheet, Text, TextInput, View} from 'react-native';
import SearchListItem from "./components/SearchListItem";
import { SearchBar } from 'react-native-elements';
import { includes } from 'lodash';

export default class App extends React.Component {


    constructor(props)
    {
        super(props);
        this.all_categories = [
            {
                "id": "1",
                "text": "abc",
                "src": "https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            },
            {
                "id": "2",
                "text": "dbef",
                "src": "https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            },

            {
                "id": "3",
                "text":"bghi",
                "src":"https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            },
            {
                "id": "4",
                "text":"jbkl",
                "src":"https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            }
        ];
        this.state = {text:"",
            categories: []
        }
    }

    search(text)
    {
        var searchResults = [];
        var categories = this.all_categories;
        for (var i = categories.length - 1; i >= 0; i--)
        {
            includes(categories[i]['text'], text) && searchResults.push(categories[i])
        }
        console.log("text searched is " + text);
        console.log(searchResults);
        return searchResults;
    }

    _keyExtractor = (item, index) => item.id;

    _renderItem(item)
    {
        console.log("item to render is");
        console.log(item);
        return <SearchListItem text={item.text} src={item.src}/>
    }

  render() {    
      console.log("rendered");
      console.log("categories to display are");
      console.log(this.state.categories);
      return (
          <View>
              <View style={{height:30,width:"100%"}}/>
              <SearchBar
                  round
                  lightTheme
                  containerStyle={{
                      backgroundColor:'transparent',
                      borderTopWidth: 0,
                      borderBottomWidth: 0,
                  }}
                  placeholder="Search!"
                  inputStyle = {{backgroundColor:'white'}}
                  onChangeText={ (text) =>
                  {
                      let result = this.search(text);
                      console.log("changing state");
                      this.setState({categories:result, text:text})
                  }}
                  value={this.state.text}
              />
              <FlatList style={{flex:1}}
                  removeClippedSubviews={false}
                  data={this.state.categories}
                  keyExtractor={this._keyExtractor}
                  renderItem={this._renderItem}
              />
          </View>
      )
  }
}

_renderItem({item})
{
    console.log("item to render is");
    console.log(item);
    return <SearchListItem text={item.text} src={item.src}/>
}