react native 개발 안드로이드 편 - 투명 제목 표시줄, 침몰식(투명) 상태 표시줄 설정

react native 개발 안드로이드 편 - 투명 제목 표시줄, 침몰식(투명) 상태 표시줄 설정
데모 꼴찌 github 주소:https://github.com/LiYaMei94/daysMatter_react_native
1단계: 상태막대를 투명도로 설정

StatusBar 응용 프로그램 상태 표시줄을 제어하는 구성 요소, 홈페이지 주소:https://reactnative.cn/docs/statusbar/, translucent를 true, backgroundColor를 transparent로 설정한다.

<StatusBar
  translucent={true}
  backgroundColor="transparent"
  barStyle="light-content"
/>

주: 이런 설정 방식은 시작 페이지에서 시작할 때 상태 표시줄이 존재하고 어떤 핸드폰은 두 번째 앱에 들어간 후에도 상태 표시줄이 존재합니다!!!!주: render에서 상태막대의 색을 설정하는 데 지연이 있을 수 있으므로 가능한 한 페이지가 바뀌기 전에 StatusBar.setBarStyle('light-content') 상태막대의 글꼴 색을 설정합니다

상태막대를 투명하게 설정하는 가장 좋은 방법은 android\app\src\main\res\values\styles.xml를 찾아서 코드를 추가하는 것이다

<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        
        
        "android:windowTranslucentStatus">true
        
    style>
resources>

2단계: 설정createBottomTabNavigator속성navigationOptions의headerTransparent는true

const TabNavigator = createBottomTabNavigator(
    {
        Days: createStackNavigator(
            {
                Days: {
                    screen: Days,
                    navigationOptions:({ navigation, screenProps }) =>  {
                        return {
                            title: '   ',
                            headerStyle: {
                                backgroundColor: 'rgba(255,255,255,0.5)',
                                height: screenProps.height,//APP.js    
                                paddingTop: screenProps.paddingTop//APP.js    
                            },
                            headerTintColor: '#666',
                            headerTitleStyle: {
                                fontWeight: 'bold',
                            },
                            headerTransparent: true,
                        }
                    }
                },
            }
        ),
        History: createStackNavigator(
            {
                History: {
                    screen: History,
                    navigationOptions:({ navigation, screenProps }) =>   {
                        return{
                            title: '      ',
                            headerStyle: {
                                backgroundColor: 'rgba(255,255,255,0.5)',
                                height: screenProps.height,
                                paddingTop: screenProps.paddingTop
                            },
                            headerTintColor: '#666',
                            headerTitleStyle: {
                                fontWeight: 'bold',
                            },
                            headerTransparent: true
                        }
                    }
                }
            }
        ),
        Setting: createStackNavigator(
            {
                Setting: {
                    screen: Setting,
                    navigationOptions:({ navigation, screenProps }) =>   {
                        return{
                            title: '  ',
                            headerStyle: {
                                backgroundColor: screenProps.themeColor,
                                height: screenProps.height,
                                paddingTop: screenProps.paddingTop
                            },
                            headerTintColor: '#ffffff',
                            headerTitleStyle: {
                                fontWeight: 'bold',
                            },
                            headerTransparent: false
                        }
                    }
                }
            }
        )
    },
    {
        defaultNavigationOptions: ({ navigation }) => (
            {
                tabBarIcon: ({ focused, tintColor }) =>
                    getTabBarIcon(navigation, focused, tintColor),
            }
        ),
        tabBarOptions: {
            activeTintColor: '#666666',
            inactiveTintColor: '#999999',
            style: {
                backgroundColor:'rgba(0,0,0,0)',
            },
        },
    }
);
//       createStackNavigator
 const StackNavigator = createStackNavigator(
    {
        bottomTabNavigator: {
            screen: TabNavigator,
            navigationOptions: {
                header: null,
            }
        },
        AddDay: {
            screen: AddDay,
        },
        PastDayDetail: {
            screen: PastDayDetail,
        },
        BackGround: {
            screen: BackGround,
        },
    },
    {
        initialRouteName: "bottomTabNavigator",
        defaultNavigationOptions:({ navigation, screenProps }) => {
            return{
                headerStyle: {
                    backgroundColor: screenProps.themeColor,
                    height: screenProps.height,
                    paddingTop: screenProps.paddingTop
                },
                headerTintColor: '#ffffff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            }
        }
    }
)
//       
export const DrawerNavigator = createDrawerNavigator(
    {
        StackNavigator: { 
            screen: StackNavigator
        },
    },
    {
        //drawerWidth: Screen.width * 0.9, //      
        drawerPosition: 'left', //          
        contentComponent: Menu, //       
        // swipeEnabled: false
    },
    
);

상태 표시줄 높이 가져오기: (파일 경로는 src의 deviceInfo.js)

import React, { Component } from 'react';
import { StatusBar,Platform,Dimensions} from "react-native";
//      
// iPhone X、iPhone XS
const X_WIDTH = 375;
const X_HEIGHT = 812;

// iPhone XR、iPhone XS Max
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const DEVICE_SIZE = Dimensions.get('window');
const { height: D_HEIGHT, width: D_WIDTH } = DEVICE_SIZE;

export const isiOS = () => Platform.OS === 'ios'

export const isiPhoneX = () => {
  return (
    isiOS() &&
    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
    ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
  );
};

//        
export const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight;

APP.js 코드:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { View, StatusBar, Dimensions, Platform } from "react-native";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import SplashScreen from 'react-native-splash-screen';
import AsyncStorage from '@react-native-community/async-storage';
//redux 
import { Provider } from 'react-redux';
import configureStore from './src/redux/store/store.js';
//      
import { DrawerNavigator } from './src/route.js';

import { STATUS_BAR_HEIGHT } from './src/deviceInfo.js';
import {theme} from './src/theme.js';
const height = STATUS_BAR_HEIGHT + 44;
const paddingTop = STATUS_BAR_HEIGHT;
const AppContainer = createAppContainer(DrawerNavigator);
const store = configureStore();//  store

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  
  componentDidMount() {
    //         ，     
      this.timer = setTimeout(() => {
        SplashScreen.hide();
      }, 900)
  }
  //     
  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);//          
  }
  /*
  
  */
  render() {
    return (
      <Provider store={store}>
        <AppContainer  screenProps={{height:height,paddingTop:paddingTop,themeColor:theme.themeColor}}/>
      </Provider>
    )
  }
}

react native 개발 안드로이드 편 - 투명 제목 표시줄, 침몰식(투명) 상태 표시줄 설정

좋은 웹페이지 즐겨찾기