Javascript 为什么我的组件在 Web 视图上垂直居中，而不是使用 React Native Expo 应用程序的本机视图

我正在try 使用flex将我的搜索组件(水平和垂直)居中.它在Web视图上工作得很好，但在Native视图上不是垂直居中.我正在使用EXPO，它有几种可用方法来查看这款应用程序:

这是App.tsx

import React from 'react';
import { View } from 'react-native';
import Search from './components/Search';

const styles: any = {
  container:{
    flex: 1,
    margin: 20,
    alignItems: 'center',
    justifyContent: 'center'
  }
}
const App = () => {

  return (
    <View style={styles.container} >
      <Search/>
    </View>
  );
};

export default App;

这里是Search.tsx

import React, { useState, useEffect } from 'react';
import { View, TextInput, FlatList, Text } from 'react-native';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    let timerId: any = null;
    if (searchTerm.length >= 2) {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        fetch(`http://localhost:8080/search/${searchTerm}`)
          .then((response) => response.json())
          .then((data) => setResults(data.results))
          .catch((error) => console.error(error));
      }, 500);
    } else {
      setResults([]);
    }

    return () => clearTimeout(timerId);
  }, [searchTerm]);

  return (
    <View>
      <TextInput
        value={searchTerm}
        onChangeText={(text) => setSearchTerm(text)}
        placeholder="Search"
      />
      <FlatList
        data={results}
        keyExtractor={(item) => item}
        renderItem={({ item }) => (
          <Text>{item}</Text>
        )}
      />
    </View>
  );
};


export default Search;