Question

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

SearchListItem

import React from 'react';
import {Image, Text, View} from "react-native";


export default class SearchListItem extends React.Component
{

    render()
    {
        return (
            <View style={{flexDirection: 'row'}}>
                <Image source={{uri: this.props.src}}
                       style={{width: 50, height: 50, backgroundColor: '#fff'}} />

                <Text style={{height: 50, lineHeight: 50, width: '100%',textAlign: 'center', flex:1, backgroundColor: '#FFF'}}>{this.props.text}</Text>
            </View>
        )
    }
}

App.js

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

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

Answer 1

运行您的代码时，我发现了两个小错误：第一个在_renderItem参数中，必须像

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

作为解构建议（see doc）。

第二个原因导致您的列表无法呈现：尝试删除FlatList道具中的style={{flex:1}}。

如果您要检查它，我刚刚创建了一个snack：

搜索时无法呈现平面列表

SearchListItem

App.js

1 个答案: