为什么我不能输入我的 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>

        )

    }

}