javascript - 为什么我不能输入本机搜索栏？(Why can't I type in my react-native SearchBar?)

Question

When I type, nothing shows up in the search bar, but it knows that I'm typing (from the print statements in my updateSearch function).(键入时，搜索栏中没有任何内容，但是它知道我正在键入（通过updateSearch函数中的打印语句）。)

From my understanding of the react-native searchBar, there isn't even anything I need to do for text to be showing up there, so I really have no idea how I could have screwed this up.(从对react-native searchBar的理解来看，甚至不需要做任何事情就可以在此处显示文本，因此我真的不知道该如何解决这个问题。) This is a part of a larger project.. but I'm praying this issue doesn't have anything to do with the rest of it.(这是一个较大项目的一部分。.但是我祈祷这个问题与其余部分无关。) 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 } });   ask by Patrick Bartlett translate from so

Answer 1

The problem is with the ListHeaderComponent .(问题出在ListHeaderComponent 。)

I did a demo project to see what was happening :(我做了一个演示项目，看看发生了什么：) 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> ) } } It looks like once the component has rendered, it does not update anymore.(看起来一旦组件被渲染，它就不再更新。) The log inside the render does actually update, but the component do not re-render himself (probably cause the FlatList do not update the ListHeaderComponent once it is done with the first render)(渲染器中的日志实际上确实会更新，但是组件不会自己重新渲染（可能导致FlatList在第一次渲染完成后不更新ListHeaderComponent ）) I would suggest to move the SearchBar above the FlatList and enclose everything inside a ScrollView .(我建议将SearchBar移到FlatList上方，并将所有内容封装在ScrollView 。) EDIT,(编辑，) To confirm that it was actually updating, i created another TextInput and put it outside the FlatList, and it worked normally:(为了确认它实际上正在更新，我创建了另一个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> ) } }