无效的 YGDirection 'row' 应该是以下之一：(inherit, ltr, rtl) - React Native

Posted 2023-02-23

【中文标题】无效的 YGDirection \'row\' 应该是以下之一：(inherit, ltr, rtl) - React Native

【英文标题】：Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) - React Native无效的 YGDirection 'row' 应该是以下之一：(inherit, ltr, rtl) - React Native

【发布时间】：2020-03-01 20:52:22

【问题描述】：

我在 ios 上收到以下错误作为可忽略的错误。 （按 esc 按钮隐藏错误并显示我的应用程序。）

无效的 YGDirection 'row' 应该是以下之一：(inherit, ltr, rtl) - 反应原生

我在我的项目中使用styled components，但我不认为这个错误是由组件引起的。

由于 react-native 使用 flex 布局，我们应该可以使用 flex-direction 属性。

我的包装组件如下：

const Wrapper = styled.View`
  flex: 1;
  align-items: $props => props.align;
  justify-content: $props => props.justify;
  flex-direction: $props => props.direction;
  flex-grow: $props => props.grow;
  flex-shrink: $props => props.shrink;
`;

Wrapper.defaultProps = 
  direction: 'column',
  align: 'flex-start',
  justify: 'flex-start',
  grow: 1,
  shrink: 0,
;

我错过了什么吗？ 完整的错误如下所示：

【参考方案1】：

我遇到了同样的问题，几个小时后解决了。

搜索任何带有方向属性的文本组件。<Text direction=value /> 将其更改为<Text dir=value /> 或任何你喜欢的道具名称

根据您的代码，它将在您的 Wrapper 中，并带有道具名称方向。

【讨论】：

将方向道具重命名为 dir （或其他东西）有效。谢谢。

react native 团队确实应该有更好的错误消息...

【参考方案2】：

如果你使用 nativebase 并得到同样的错误， 找到具有direction="row" 选项的<Flex></Flex> 标记，注释选项将解决错误，

如果您想获得类似的结果，也可以将<Flex></Flex> 替换为<HStack></HStack>

【参考方案3】：

我在我的 RN 项目中遇到了类似的问题。对我来说，这个问题是由于 flex-direction 造成的。

如果你使用的是 flex，而不是 direction，它应该是 flexDirection。

所以而不是：

<Flex direction="row"></Flex>

这样做：

<Flex flexDirection="row"></Flex>

这解决了我的问题。