NativeBase + Exponent Header

Question

Я использую NativeBase с Exponent. Заголовок загорается под статусом StatusBar. Вы можете увидеть это в демо-версии NativeBase, которую выпустил Exponent.

Кто-нибудь есть исправление для этого?

Answer 1

В итоге я добавил marginTop со значением StatusBar устройства.

import { 
    StatusBar, 
} from 'react-native' 

В моей глобальной таблице стилей:

header: { 
    marginTop: StatusBar.currentHeight, 
} 

Answer 2

Я нашел лучший способ справиться с этим, используя StyleProvider с моей темой, а затем в де папку компоненты (родной базы-тематических/компонентов) найдено файл Header.js и изменить значение paddintTop (около 305 линии)

Answer 3

Поскольку этот вопрос только приходит в Android, рекомендуемый способ исправить это будет предназначаться Android конкретно с помощью платформы:

import {Platform, StatusBar} from 'react-native' 

const styles = StyleSheet.create({ 
    container: { 
      flex: 1, 
      ...Platform.select({ 
       android: { 
        marginTop: StatusBar.currentHeight 
       } 
      }) 

     } 
}) 

Где контейнер является основным контейнером в приложении.

<View style={{styles.container}}> 
// rest of the code here 
</View>