用Flex.Item 调整Image buttons的位置怎么无效？

Question

用<Flex>和<Flex.Item> 无法调整Image buttons位置，造成叠加。

import React from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity, SafeAreaView} from 'react-native';
import {Provider, Button, WhiteSpace, Flex} from '@ant-design/react-native';
import customTheme from './src/styles/customTheme';


const App = () => {
   return (
      <Provider theme={customTheme}>
         <SafeAreaView>
            <View>  
               <Flex direction='column'>
                  <Flex.Item>                                   
                     <TouchableOpacity style={styles.facebookLoginButton} activeOpacity={0.5}>                                
                        <Image 
                           source={require('./img/facebookLoginButton.png')}
                           style={styles.img}                            
                        />        
                     </TouchableOpacity>         
                  </Flex.Item>
                  <Flex.Item>                       
                     <TouchableOpacity style={styles.googleLoginButton} activeOpacity={0.5}>     
                        <Image 
                           source={require('./img/googleLoginButton.png')}                                    
                        />      
                     </TouchableOpacity>                        
                  </Flex.Item>               
               </Flex>               
            </View>
         </SafeAreaView>
      </Provider>
   );
};
export default App;

const styles = StyleSheet.create({  
   facebookLoginButton: {              
      width: 240,
      height: 40
   },
   googleLoginButton: {      
      borderColor: '#D3D3D3',
      borderWidth: 0.5,
      width: 240,
      height: 40
   }
});