问题标签 [react-native-flexbox]

试图在 renderRow 中显示一个列表项。我已经在我的项目中实现了 RTL，正如 react native 文档中所定义的那样，我对console.log(I18nManager.isRTL ? 'yes' : 'no').
我正在尝试展示一个设计好的表格单元格，所以它是一个图像，我正在尝试在其上布置我的项目。所以标志是这样定义的：

结果令人失望。

它应该是这样的：

现在是这样的：

最困扰我的是它过去看起来还不错，我不确定是什么把它弄成这样。

此外，当应用程序启动时，“正在加载”文本显示在窗口的右侧。

我可以justifyContent: 'space-evenly'在 React Native 中的任何元素上使用吗？在哪些？语法应该是什么样的？

谢谢！

I have this React component:

The CSS:

How would I add them to the same row and apply flex-direction and flex-wrap? (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

I tried

but it didn't do anything.

我正在构建一个非常简单的应用程序，带有一个选择器和两个输入/标签。

它目前在我的 iphone 中看起来像这样。

这是我的代码

但我希望它看起来像这样，如下所示。

我尝试了边距、填充等。仍然没有运气。

有人可以告诉我可以使用什么 css/flex 属性来更改 UI，就像我想要的那样？

在本机反应中，我想达到这种效果

当然，所有按钮都应该具有相同的宽度和高度。为此，我使用弹性盒子。我怎样才能用 flexbox 做到这一点？我尝试：

}

但这给了我：

请帮忙

我在这里使用 react-native-elements 列表：https ://react-native-training.github.io/react-native-elements/API/lists/

当我用它渲染它时，flex: 1它非常狭窄。当我用width: 400它渲染它时就可以了。

以下是样式：

这是列表代码：

这是上面代码的样子：

如果我设置containerStyle={{width: 400}}

我认为 flex: 1 会使其成为最大宽度？我需要做什么才能让它占据整个父容器？

我有一个最小的自定义无状态组件，如下所示：

所以我想在另一个组件中导入并使用它。

这里我们至少有 2 个莫名其妙的事实：
1）更重要的是 ViewBox（或您要在此处使用的每个自定义组件）的宽度和高度完全失控！分配数字大小或 Flex 值无效，并且 ViewBox 保持呈现内部文本所需的最小宽度/高度。

2）删除根视图（因此 ViewBox 成为根） ViewBox 继续忽略任何大小，但现在它填充了所有可用空间....为什么？

所有提到的行为都使用自定义视图（在本例中为 ViewBox）发生，而不是如果将其替换为普通视图，则所有工作都按预期工作。
我想知道足够多的 React-native 的 flex 和 UI 最佳实践，但是文档没有很好地涵盖这两种情况。希望有人能给我惊喜！

我有一个简单的 View，它有两个孩子，另一个 View 和一个 ScrollView。ScrollView 应该比同级别的 View 高 5 倍，使用 flexbox。

所以我只是简单地将 flex:1 和 flex:5 添加到子视图中，但是在渲染视图中它们都正好适合屏幕的一半。看起来好像这两个 flex 属性被忽略了......

顺便说一句，使用第二个 View 而不是 ScrollView 就可以了！

任何想法如何使用 ScrollView 实现 1:5 的比例？

一般来说，我是 react-native 和移动应用程序开发的新手，我正在尝试为我的应用程序创建一个标题，其中包含一个文本和一个按钮。

这是我的代码：

因此，我将带有 flexDirection 的标题放在行中，并在我的视图中添加了我的文本和带有 flex: 1 和 flex: 2 的 Button 元素，所以我期待这个结果：

预期结果

但相反，我有这个：按钮内的文本被截断，我的按钮没有占用他应该占用的空间。

在移动应用程序上渲染（OP3 手机）

我尝试使用 alignSelf 属性和宽度，但似乎没有任何效果。

在 facebook Button 示例中，我可以看到 Button 可以定义 Button 的宽度，但我不知道如何使其工作。

我正在使用 React Native Web 库，但我无法在 Web 上实现全高度

代码：

chrome浏览器的结果：