Реагировать на новичков в нативной навигации: полноэкранная ширина в шоу InAppNotification? - PullRequest
Новая
       15

Реагировать на новичков в нативной навигации: полноэкранная ширина в шоу InAppNotification?

0 голосов
/ 31 мая 2018

Я использую react-native-navigation для отображения выпадающих уведомлений об ошибках через 'showInAppNotification'.

Я пытался оформить выпадающий список следующим образом: 

{
  backgroundColor: colorRed,
  flex: 1,
  alignSelf: 'stretch',
}

Я не могуполучите коробку, чтобы повиноваться этому flex вызову.Он остается шириной текста в уведомлении.

То есть, что я получаю так:

Bad Notification Width

И чтоЯ хочу, чтобы это:

Good Notification Width

(второе достигается путем установки жесткой ширины 999, но это не является удовлетворительным решением)

Итак, исходя из моего ограниченного понимания логики таблиц стилей React Native, я предположил, что у меня есть родительский элемент с фиксированной шириной над уведомлением.За исключением меня.Он вызывается напрямую (ну, если я не пропускаю какой-то внедренный компонент showInAppNotification) в мой HOC провайдера, который выглядит следующим образом: 

<Provider store={store}>
  <ErrorBoundary>
    {children}
  </ErrorBoundary>
</Provider>

Чтобы подтвердить, что ErrorBoundary был полноэкранной шириной, я бросилbackgroundColor: green на границе ошибки.Это возвращалось как ожидаемая ширина, как это:

Notification Green Background

Есть мысли о том, что может продолжаться?Как уже упоминалось, я новичок в реагировании на родную систему, и, возможно, мне не хватает чего-то очевидного в отношении гибкой логики, но я подозреваю, что это проблема уведомлений о реагировании на родную систему, и я надеюсь, что другие столкнулись.Любые мысли приветствуются.

1 Ответ

0 голосов
/ 10 июня 2018

Вместо того, чтобы придавать вашей ширине жестко запрограммированное значение, вы можете импортировать класс реагирования Dimensions в ваш компонент и использовать его для установки ширины.

Итак, ваш код можетвыглядеть примерно так: 

import { ...., Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

const styles = {
    notification : {
        backgroundColor: colorRed,
        width,
        alignSelf: 'stretch'
    }
}
...