React native 将React本机功能组件转换为类组件

我对React Native是个新手，在学习了一些教程之后，我把它拼凑在一起，但现在我想在应用程序启动时加载一些GIF，而不是在点击按钮之后

我做了一些研究，发现功能组件不可能实现，我需要切换到类组件来使用生命周期功能，如：

componentWillMount(){
        this.setState({data : inputObject});
    }

到目前为止，我读过的所有示例的组件中都没有函数，我也不知道如何处理它们。因此，如果可以在应用程序开始按原样使用时调用函数，请告诉我如何将此代码转换为类组件样式，如果不可以，请告诉我如何将此代码转换为类组件样式？谢谢

import React, {useState} from 'react';
import {
  Dimensions,
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  FlatList,
} from 'react-native';
import SearchInput from './SearchInput';

export default function App() {
  const [allGifResults, setAllGifResults] = useState([]);

  function addSearchResultsHandler(searchTerm) {
    console.log(searchTerm);
    setAllGifResults([]);
    fetchResults(searchTerm);
  }

  function allGifResultsHandler(url) {
    setAllGifResults(currentGifs => [...currentGifs, {id: url, value: url}]);
  }

  function fetchResults(searchTerm) {
    fetch(
      'http://api.giphy.com/v1/gifs/search?q=' +
        searchTerm +
        '&api_key=MKSpDwx7kTCbRp23VtVsP4d0EvfwIgSg&limit=50',
    )
      .then(response => response.json())
      .then(responseJson => {
        for (let item of responseJson.data) {
          allGifResultsHandler(item.images.fixed_height.url);
          console.log(item.images.fixed_height.url);
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.screen}>
        <SearchInput onSearchButtonPressed={addSearchResultsHandler} />
      </View>

      <FlatList
        keyExtractor={(item, index) => item.id}
        data={allGifResults}
        numColumns={2}
        renderItem={itemData => (
          <Image
            source={itemData.item.value ? {uri: itemData.item.value} : null}
            style={styles.images}
          />
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  screen: {
    margin: 10,
  },
  images: {
    width: Dimensions.get('window').width / 2 - 20,
    height: Dimensions.get('window').width / 2 - 20,
    margin: 10,
  },
});

import React，{useState}来自“React”；
进口{
尺寸，
样式表，
安全区域视图，
看法
形象,，
平面列表，
}从“反应本机”；
从“./SearchInput”导入SearchInput；
导出默认函数App（）{
常量[allGifResults，setAllGifResults]=useState（[]）；
函数addSearchResultsHandler（searchTerm）{
console.log（searchTerm）；
SetAllGif结果（[]）；
获取结果（搜索术语）；
}
函数allGifResultsHandler（url）{
setAllGifResults（currentGifs=>[…currentGifs，{id:url，value:url}]）；
}
函数fetchResults（searchTerm）{
取回(
'http://api.giphy.com/v1/gifs/search?q=' +
搜索词+
“&api_key=MKSpDwx7kTCbRp23VtVsP4d0EvfwIgSg&limit=50”，
)
.then（response=>response.json（））
.然后（responseJson=>{
for（让响应项的数据）{
allGifResultsHandler（item.images.fixed_height.url）；
日志（item.images.fixed_height.url）；
}
})
.catch（错误=>{
控制台错误（error）；
});
}
返回(
项目id}
数据={allGifResults}
numColumns={2}
renderItem={itemData=>(
)}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#F5FCFF”，
},
屏幕：{
差额：10，
},
图像：{
宽度：尺寸。获取（“窗口”）。宽度/2-20，
高度：尺寸。获取（“窗口”）。宽度/2-20，
差额：10，
},
});

import React，{useState}来自“React”；
进口{
看法
文本输入，
可触摸不透明度，
文本，
样式表，
}从“反应本机”；
功能搜索输入（道具）{
常量[searchTerm，setSearchTerm]=useState（“”）；
权限管理器中的函数（输入文本）{
设置搜索项（输入文本）；
}
返回(
搜寻
);
}
const styles=StyleSheet.create({
输入容器：{
flexDirection:'行'，
justifyContent:'之间的空间'，
alignItems:'flex start'，
marginBottom:20，
},
输入：{
宽度：“70%”，
边框颜色：“黑色”，
边框宽度：1，
尺寸：16，
},
搜索按钮：{
身高：50，
宽度：100，
背景颜色：“浅蓝色”，
边缘左：10，
},
searchButtonText：{
身高：50，
尺码：18，
textAlign:'中心'，
textAlignVertical:'中心'，
},
});
导出默认搜索输入；

从“React”导入React，{useState}；
进口{
尺寸，
样式表，
安全区域视图，
看法
形象,，
平面列表，
}从“反应本机”；
从“./SearchInput”导入SearchInput；
常量[allGifResults，setAllGifResults]=useState（[]）；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
this.addSearchResultsHandler=this.addSearchResultsHandler.bind（this）；
this.allGifResultsHandler=this.allGifResultsHandler.bind（this）；
this.fetchResults=this.fetchResults.bind（this）；
}
addSearchResultsHandler（searchTerm）{
console.log（searchTerm）；
SetAllGif结果（[]）；
获取结果（搜索术语）；
}
allGifResultsHandler（url）{
setAllGifResults（currentGifs=>[…currentGifs，{id:url，value:url}]）；
}
获取结果（搜索术语）{
取回(
'http://api.giphy.com/v1/gifs/search?q=' +
搜索词+
“&api_key=MKSpDwx7kTCbRp23VtVsP4d0EvfwIgSg&limit=50”，
)
.then（response=>response.json（））
.然后（responseJson=>{
for（让响应项的数据）{
allGifResultsHandler（item.images.fixed_height.url）；
日志（item.images.fixed_height.url）；
}
})
.catch（错误=>{
控制台错误（error）；
});
}
render（）{
返回(
this.addSearchResultsHandler（数据）}/>
项目id}
数据={allGifResults}
numColumns={2}
renderItem={itemData=>(
)}
/>
);
}
}
导出默认应用程序；
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#F5FCFF”，
},
屏幕：{
差额：10，
},
图像：{
宽度：尺寸。获取（“窗口”）。宽度/2-20，
高度：尺寸。获取（“窗口”）。宽度/2-20，
差额：10，
},
});
从“React”导入React，{useState}；
进口{
看法
文本输入，
可触摸不透明度，
文本，
样式表，
}从“反应本机”；
常量[searchTerm，setSearchTerm]=useState（“”）；
类SearchInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
this.inputHandler=this.inputHandler.bind（this）；
}
输入权限管理器（输入文本）{
设置搜索项（输入文本）；
}
render（）{
返回(
搜寻
);
}
}
导出默认搜索输入；
const styles=StyleSheet.create({
输入容器：{
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：'fle
import React, {useState} from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';

function SearchInput(props) {
  const [searchTerm, setSearchTerm] = useState('');

  function inputHandler(enteredText) {
    setSearchTerm(enteredText);
  }

  return (
    <View style={styles.inputContainer}>
      <TextInput
        placeholder="Search Term"
        style={styles.input}
        onChangeText={inputHandler}
        value={searchTerm}
      />
      <TouchableOpacity
        style={styles.searchButton}
        onPress={props.onSearchButtonPressed.bind(this, searchTerm)}>
        <Text style={styles.searchButtonText}>Search</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 20,
  },
  input: {
    width: '70%',
    borderColor: 'black',
    borderWidth: 1,
    fontSize: 16,
  },
  searchButton: {
    height: 50,
    width: 100,
    backgroundColor: 'lightblue',
    marginLeft: 10,
  },
  searchButtonText: {
    height: 50,
    fontSize: 18,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});

export default SearchInput;

    import React, {useState} from 'react';
    import {
      Dimensions,
      StyleSheet,
      SafeAreaView,
      View,
      Image,
      FlatList,
    } from 'react-native';
    import SearchInput from './SearchInput';
    const [allGifResults, setAllGifResults] = useState([]);

    class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {

          };
        this.addSearchResultsHandler = this.addSearchResultsHandler.bind(this);
        this.allGifResultsHandler = this.allGifResultsHandler.bind(this);
        this.fetchResults = this.fetchResults.bind(this);
      }

      addSearchResultsHandler(searchTerm) {
        console.log(searchTerm);
        setAllGifResults([]);
        fetchResults(searchTerm);
      }

      allGifResultsHandler(url) {
        setAllGifResults(currentGifs => [...currentGifs, {id: url, value: url}]);
      }

      fetchResults(searchTerm) {
        fetch(
          'http://api.giphy.com/v1/gifs/search?q=' +
            searchTerm +
            '&api_key=MKSpDwx7kTCbRp23VtVsP4d0EvfwIgSg&limit=50',
        )
          .then(response => response.json())
          .then(responseJson => {
            for (let item of responseJson.data) {
              allGifResultsHandler(item.images.fixed_height.url);
              console.log(item.images.fixed_height.url);
            }
          })
          .catch(error => {
            console.error(error);
          });
      }
      render(){
         return (
            <SafeAreaView style={styles.container}>
              <View style={styles.screen}>
                <SearchInput onSearchButtonPressed={(data)=> this.addSearchResultsHandler(data)} />
              </View>

              <FlatList
                keyExtractor={(item, index) => item.id}
                data={allGifResults}
                numColumns={2}
                renderItem={itemData => (
                  <Image
                    source={itemData.item.value ? {uri: itemData.item.value} : null}
                    style={styles.images}
                  />
                )}
              />
            </SafeAreaView>
          );
      }
    }

    export default App;

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
      },
      screen: {
        margin: 10,
      },
      images: {
        width: Dimensions.get('window').width / 2 - 20,
        height: Dimensions.get('window').width / 2 - 20,
        margin: 10,
      },
    });

   import React, {useState} from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';

const [searchTerm, setSearchTerm] = useState('');
class SearchInput extends React.Component {
  constructor(props) {
      super(props);
      this.state = {

      };
    this.inputHandler = this.inputHandler.bind(this);
  }

  inputHandler(enteredText) {
    setSearchTerm(enteredText);
  }

  render(){
    return (
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Search Term"
          style={styles.input}
          onChangeText={inputHandler}
          value={searchTerm}
        />
        <TouchableOpacity
          style={styles.searchButton}
          onPress={props.onSearchButtonPressed.bind(this, searchTerm)}>
          <Text style={styles.searchButtonText}>Search</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
export default SearchInput;


const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 20,
  },
  input: {
    width: '70%',
    borderColor: 'black',
    borderWidth: 1,
    fontSize: 16,
  },
  searchButton: {
    height: 50,
    width: 100,
    backgroundColor: 'lightblue',
    marginLeft: 10,
  },
  searchButtonText: {
    height: 50,
    fontSize: 18,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});

export default SearchInput;