получить элемент в React Native - PullRequest
Новая
       27

получить элемент в React Native

0 голосов
/ 02 августа 2020

Я хочу создать элемент Text внутри элемента View, как мне связать это? Я пробовал следующее. (После ввода внутри ввода выполняется поиск в базе данных, и результат переводится в текстовый элемент). 

class SearchScreen extends React.Component {
 state = {
    inputValue: "",
  };

search() {

   //Here I do the search in Firebase Realtime Database (it works)

   var textElement = React.createElement(
   Text,
   { style: { fontSize: 20 } },
   [...] //Here inside is the retrieved data from the database
    );
    var resultView = useRef(resultView); //This doesn't work
    ReactDOM.render(textElement, resultView);
  }

  setSearch = (inputValue) => {
    this.setState({ inputValue }, () => this.search());
  };

render() {
    return (
      <View>
       <TextInput
            onChangeText={(inputValue) => this.setSearch(inputValue)}
            value={this.state.inputValue}
          />
       <View ref="resultView">
       </View>

      </View>

)
}
}

export default SearchScreen;

1 Ответ

0 голосов
/ 02 августа 2020

ReactDom не работает с React Native.

Попробуйте что-то вроде этого: 

class SearchScreen extends React.Component {
  state = {
    inputValue: '',
    resultText: '',
    resultList: [],
  };

  search() {
    //Here I do the search in Firebase Realtime Database (it works)
    //[...] //Here inside is the retrieved data from the database
    // Simulate request to the database
    setTimeout(() => {
      const databaseResultText = 'Hello World';
      this.setState({
        resultText: databaseResultText,
      });

      const databaseResultList = [
        {
          name: 'Bob',
        },
        {
          name: 'Steve',
        },
      ];
      this.setState({
        resultList: databaseResultList,
      });
    }, 1000);
  }

  setSearch = (inputValue) => {
    this.setState({inputValue}, () => this.search());
  };

  render() {
    return (
      <View>
        <TextInput
          onChangeText={(inputValue) => this.setSearch(inputValue)}
          value={this.state.inputValue}
        />
        <View>
          <Text>{this.state.resultText}</Text>
        </View>
        <View>
          {this.state.resultList.map((item) => {
            return <Text>{item.name}</Text>;
          })}
        </View>
      </View>
    );
  }
}

export default SearchScreen;
...