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

Question

我在 iOS 上收到以下错误，这是一个可忽略的错误。（按 esc 按钮隐藏错误并显示我的应用程序。）

Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) - React Native

我正在我的项目中使用 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,
};

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

Answer 1

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

搜索任何包含方向属性的文本组件。
<Text direction={value} />
改成
<Text dir={value} /> 或者你喜欢的任何道具名称

根据您的代码，它将在您的 Wrapper 中以道具名称 direction。

Answer 2

如果您使用 nativebase 并遇到相同的错误，找到具有 direction="row" 选项的 <Flex></Flex> 标签，评论选项将解决错误，

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

Answer 3

我在我的 RN 项目中遇到了类似的问题。对我来说，这个问题是因为 flex-direction.

如果您使用的是 flex，而不是 direction，则应该是 flexDirection。

所以代替：

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

这样做：

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

这解决了我的问题。

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

Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) - React Native

react-native

react-native-ios