React-Native view был визуализирован с явно заданной шириной/высотой, но с 0 flexBasis

В React-native 0.39,

Я часто получаю эту ошибку, но я действительно не понимаю, почему (добавьте тот факт, что я не установил flexGrow...).

Ниже приведена ошибка с консоли

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6080005a02a0; viewName: RCTView; reactTag: 2608; frame: {{0, 0}, {nan, nan}}>

Может кто-нибудь объяснить мне, почему эта ошибка срабатывает?

EDIT: ошибка возникает из этого бита кода шаблона, который я добавил на основном экране:

flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,

Но если кто-то может пролить свет на стиль реагирования, или привести меня к хорошим ресурсам, я буду благодарен:)

Ответы

Ответ 1

Обратитесь к response-native/React/Views/RCTShadowView.m, есть комментарии

    This works around a breaking change in css-layout where setting flexBasis needs to 
be set explicitly, instead of relying on flex to propagate.

    We check for it by seeing if a width/height is provided along with a flexBasis  
of 0 and the width/height is laid out as 0.

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

Обратитесь к response-native/Libraries/StyleSheet/LayoutPropTypes.js, мы знаем, что значения flexGrow, flexShrink и flexBasis получают число.

Для визуального руководства вы можете обратиться к этой веб-странице, Визуальный путеводитель по CSS3 Flexbox Свойства.

Ответ 2

Задание flexDirection: 'row' решает проблему ¯\_(ツ)_/¯

Ответ 3

Как говорится в ошибке: измените "flex" на "flexGrow" , и проблема будет решена.

Сложная часть этого вопроса заключается в том, как найти, из-за которой нужно "сгибать" из всего проекта. То, что я сделал, было (с помощью Atom Editor, так что "Find in Project"...) меняя каждый "flex:" на "flexGrow:" (с помощью ":" в конце вы убедитесь, что вы меняете стиль), а затем просто повторите поиск всего проекта для "flexGrow" и измените каждый "flexGrow" из каждого файла с помощью "flex" , пока не найдете поврежденный "flex" .

Я предпочитаю использовать flex вместо flexGrow, поэтому я возвращаюсь к flex. Вот почему: Реквизиты макета

Надеюсь, что это решает проблемы.

Ответ 4

В node_modules/react-native/React/Views/RCTShadowView.m добавьте "//" в строке 170, как это "//RCTAssert (! YGNodeIsDirty (node), @" Попытка получить метрики макета из грязная йога node. ");"