[React Native] Stack 사용 시 백그라운그 컬러 바꾸기

 

자세히 보니 어플 뒷 배경이 조금 그레이 색! -> 하얗게 or 다른 색으로 바꿔주기 

 

const HomeScreenOptions = {
  headerStyle: { backgroundColor: 'lavender' },
  headerTitleStyle: { color: 'black', justifyContent: 'center' },
  headerTintColor: 'white',
  headerMode:'screen',
  cardStyle:{backgroundColor:'#ffffff'}
}

 

screenOptions 에 아래 두 코드 넣어주면 어플 배경이 디폴트 값 옅은 그레이에서 하얗게 된다 ! 

headerMode:'screen',  
cardStyle:{backgroundColor:'#ffffff'}

 

stact navigator 에 옵션을 넣어주기 ! 

const Tabs = createBottomTabNavigator();
const YourwordsStack = createStackNavigator();
const HomeStack = createStackNavigator();
const MyInfoStack = createStackNavigator();

const YourwordsStackScreen = () => (
  <YourwordsStack.Navigator screenOptions={HomeScreenOptions}>
    <YourwordsStack.Screen name="Yourwords" component={YourwordsScreen} />
    <YourwordsStack.Screen name="YourwordsShow" component={YourwordsShowScreen} options={{ headerShown: false }} />
  </YourwordsStack.Navigator>
)

 

render 

export default function MainApp({ navigation }) {
  return (
      <NavigationContainer independent={true}>
        <Tabs.Navigator
          initialRouteName="HomeTab"
          screenOptions={{
            tabBarHideOnKeyboard: true,
            tabBarStyle: [
              {
                display: 'flex'
              },
              null
            ]
          }}
        >
          <Tabs.Screen
            name="YourwordsTab"
            component={YourwordsStackScreen}
            options={{
              headerShown: false,
              tabBarIcon: () => (<FontAwesome name="telegram" size={30} />)
            }}
          />