为什么我不能输入我的 react-native SearchBar？

Question

当我输入时，搜索栏中没有显示任何内容，但它知道我正在输入（来自我的 updateSearch 函数中的打印语句）。根据我对 react-native searchBar 的理解，我什至不需要做任何事情来显示文本，所以我真的不知道我怎么可能搞砸了。这是一个更大项目的一部分.. 但我祈祷这个问题与它的其余部分没有任何关系。

import React, { Component } from "react";
import {
  View,
  Text,
  FlatList,
  ActivityIndicator,
  SafeAreaView,
  StyleSheet
} from "react-native";
import Header from "../components/Header";
import { SearchBar, List, ListItem } from 'react-native-elements';

export default class Search extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      query: "",
      data: []
    };

  }

  renderHeader = () => {
    return (
    <SearchBar
    placeholder="Type Here..."
    onChangeText={this.updateSearch}
    value={this.state.query}
    lightTheme={true}
    />
    );
  }

  updateSearch = text => {
    console.log("text", text);
    const formattedSearch = text.toLowerCase();
    this.setState({ query: formattedSearch });
    console.log("text", this.state.query);
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Header text={"Search"} />
        <FlatList
          ListHeaderComponent={this.renderHeader}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight
  }
});

Answer 1

如果你想用渲染更新你的 UI，你必须更新你的状态。 在您的 FlatList 组件中，您不会更新状态。所以它永远不会再次渲染。 您必须在 FlatList 中使用状态。

render() {
    return (
      <SafeAreaView style={styles.container}>
        <Header text={"Search"} />
        <FlatList
          ListHeaderComponent={this.renderHeader}
          AnyProp={this.state.anyState}
        />
      </SafeAreaView>
    );
  }

Answer 2

问题在于ListHeaderComponent。

我做了一个演示项目来看看发生了什么：

import React, { Component } from 'react'
import { SafeAreaView, FlatList, TextInput } from 'react-native'

export default class Test extends Component {
    constructor(props){
        super(props)
        this.state={value:""}
    }

    renderHeader = () =>{
        console.log("rendering") 
        return (<TextInput style={{backgroundColor:"green"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>)
    }
    render() {
        console.log(this.state.value) //Logs the value
        return (
            <SafeAreaView style={{flex:1}}>
                <FlatList
                ListHeaderComponent={this.renderHeader}
                />
            </SafeAreaView>
        )
    }

}

看起来组件一旦渲染，就不再更新了。渲染中的日志确实会更新，但组件不会重新渲染自己（可能导致FlatList 在第一次渲染完成后不会更新ListHeaderComponent）

我建议将 SearchBar 移到 FlatList 上方并将所有内容包含在 ScrollView 中。

编辑，

为了确认它确实在更新，我创建了另一个TextInput并将它放在FlatList之外，它可以正常工作：

import React, { Component } from 'react'
import { SafeAreaView, FlatList, TextInput } from 'react-native'

export default class Test extends Component {
    constructor(props){
        super(props)
        this.state={value:""}
    }

    renderHeader = () =>{
        console.log("rendering") 
        return (<TextInput style={{backgroundColor:"green"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>)
    }
    render() {
        console.log(this.state.value) //Logs the value
        return (
            <SafeAreaView style={{flex:1}}>
                <TextInput style={{backgroundColor:"red"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>
                <FlatList
                ListHeaderComponent={this.renderHeader}
                />
            </SafeAreaView>
        )
    }

}