Question

我试图使用react native元素创建一个搜索栏。运行代码时，出现了一个搜索栏，但不允许我在其中输入文本。实际上，搜索栏甚至没有占据模拟器的顶部。就像一个小按钮的大小。它看起来像一个图标或静止图像，不允许我输入文本。这曾经发生在任何人身上吗？以下是我编写的代码。有人知道这可能是什么问题吗？我安装了RN元素并将其链接。我什至只安装了NPM，也没有任何反应。任何帮助或线索，将不胜感激。这是我要创建的搜索栏的链接： https://react-native-training.github.io/react-native-elements/docs/searchbar.html#docsNav

import { SearchBar } from 'react-native-elements';

export default SearchBar extends React.Component {
      constructor(props) {
         super(props);
         this.state = {
         search: ""
         };
         updateSearch = search => {
        this.setState({ search });
         };
       }
          render(){
            return(
              <SearchBar
                 containerStyle={{
                 backgroundColor: "white",
                 borderBottomWidth: 1,
                 borderRadius: 1 1
               }}
              inputStyle={{ backgroundColor: "white" }}
              placeholder="Type Here..."
              placeholderTextColor={ "White" }
              onChangeText={this.updateSearch}
              value={search}
              />
             )
            }
          }

Answer 1

我认为问题是，

value={search}

应该是

value={this.state.search}

或者，您应该使用变量来获取状态，

render(){
   const { search } = this.state;            
return(

注意：您已在updateSearch内编写了constructor方法，您需要在constructor之外编写（如果不是错字）

这是您提供的link中的示例，

import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  state = {
    search: '',
  };

  updateSearch = search => {         //This function is outside of constructor
    this.setState({ search });
  };

  render() {
    const { search } = this.state;   //You missed this

    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={this.updateSearch}
        value={search}
      />
    );
  }
}

Answer 2

您需要使用this.state.search调用构造函数中设置的值

出现搜索栏，但我无法输入文本

2 个答案: