react native bottom Tab 관련

import React, { Component } from 'react';
import { View, Text, FlatList,TouchableOpacity } from 'react-native';


import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();


class App extends Component {

  

  render() {
    
    return (
      <NavigationContainer>
        <Tab.Navigator
           tabBarOptions = {
              {
                /* style: {				
                  elevation: 4,
                  marginBottom:10,
                  marginTop:10
                } */

                // 탭바 위의 쉐도우
                style: { borderTopWidth: 2, elevation: 8 ,}
              }
           }
        >
          <Tab.Screen 
            name="Home" 
            component={HomeScreen}
            options ={
              {
                // 아이콘 적용하기  (focused 된 경우 아이콘의 source 를 변경 해주면된다. )
                /* tabBarIcon: ({ focused }) => {
                  return (
                    <View
                      style={{
                        height: 30,
                        width: 30,
                        backgroundColor: focused ? 'green' : 'red'
                      }}>

                    </View>)
                }, */

                // 탭바에서 숨기기 
                // tabBarButton: (props) => {return(<View></View>)}

              }
            }
          />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    )
  }
}

class HomeScreen extends Component {

  render(){
    return(
      <View style = {{flex:1, justifyContent:'center' , alignItems:'center'}}>
          <Text>home Screen </Text>
      </View>
    )
  }
}


class SettingsScreen extends Component {

  render(){
    return(
      <View style = {{flex:1, justifyContent:'center' , alignItems:'center'}}>
          <Text>SettingsScreen</Text>
      </View>
    )
  }
}




export default App;