将我的类组件转换为功能组件的方法是什么？

Question

What is the way to transform my class component into function component? in my example I try to display search bar and i need do it with function component instead class component.

import React, { useState} from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
 
const ExampleOne = (props) =>{ 
      const [tableHead, settableHead] = useState(['Head', 'Head2', 'Head3', 'Head4'])
      const [tableData,settableData] = useState([
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
      ])
  
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={tableData} textStyle={styles.text}/>
        </Table>
      </View>
    ) 

export default ExampleOne 
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});

Answer 1

Probably you can try as the following:

import React, { useState } from 'react';
import { SearchBar } from 'react-native-elements';

const App = () => 
  const [search, setSearch] = useState({
     text: ''
  });

  return {
    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={ (search) => setSearch({ text: search }) }
        value={search.text}
      />
    );
  }
}

export default App;

I suggest the following documentation to read in more details: Using the State Hook

+1 addition:

I would consider using const [search, setSearch] = useState('') only for your search state because it is shorter. In the mentioned way you can store more information in the search state but it's up to you which fits for your situation better.

Answer 2

You use React Hook and change your class-based component to functional component

import React, { useState } from "react";
import { SearchBar } from "react-native-elements";

const App = () => {
  const [search, setSearch] = useState("");

  const updateSearch = (search) => {
    setSearch(search);
  };

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

export default App;

Answer 3

import React, { useState } from 'react';
import { SearchBar } from 'react-native-elements';


export default App = () => {
    const [search, setSearch ] = useState('');

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