问题标签 [react-native-flexbox]

我正在尝试使用 Ignite 学习 React Native。一直在与布局作斗争。这是我的主要容器渲染功能：

特别是，容器的最后一个兄弟有一个带有 BottomBar 组件的视图。底部样式这样做：

BottomBar 组件：

与之相关的样式：

我遇到的问题是，如果我看到这样的圆形按钮的底部栏组件：

及其风格：

我得到了预期的看法：

但是，通过我的 BottomBar 组件，我得到：

需要注意的一点是，debugGreen 样式只是一个边框，应该环绕在我的 BottomBar 组件周围，它显示为平面，但其中的图标呈现较低，并且图标周围的 debugYellow 样式框按预期显示在图标周围，只是向下移动了一个整体。

我编写了一个简单的 react-native 消息传递应用程序，其中包含 2 个文本元素的消息气球：消息文本和消息时间。消息文本可以是多行的，并且时间文本具有固定宽度。但是，我遇到了无法将时间文本元素安排在与消息文本的最后一行相同级别的问题。

我的目标是获得一个行为类似于易于执行的 HTML 示例的组件，但我不知道如何在 RN 的 flex-box 模型中实现此类。

任何帮助，将不胜感激。

我想在具有明确高度的视图中垂直居中我的文本。

在 react-native 中垂直居中文本并没有完全回答我的问题，因为它们没有使用明确的高度。

当我使用

如果我去掉明确的高度，

有用。

我需要设置显式高度，因为我会将此视图转换为可点击按钮。

我该如何进行这项工作？我对 react-native 布局有什么误解？

我正在尝试创建一个类似于下图的项目列表。

目前我正在创建一个 RowComponent 并在其中包含 ItemContainer 组件以创建上述效果。

主屏幕视图

我发现这种方法效率很低，因此我希望知道如何通过复制 ItemContainer 来创建上述效果来创建这种效果。

例如：

基本上由两部分构成：grid（flex view）和listview。

使用的元素来自原生基础。

我也用过<View>，但问题还是一样。

代码片段是：

附上重叠问题：

我的应用中有一些视图，

第一个和最后一个具有固定尺寸，但中间视图我将填充剩余空间。
我该怎么做？

我无法使用“Flex”让“scrollView”占用 8 倍于“adContainer”的空间。
相反，屏幕呈现好像两者都设置为“Flex：1”，每个都占用相同数量的空间。

代码：

}

ScrollView 功能正常，但它没有占用我想要的空间量（是 adContainer 的 8 倍）。
我尝试在 ScrollView 周围添加一个“视图”，并在其上放置“Flex：8”。

代码：

就“scrollViewContainer”占用的空间量而言，这确实具有我想要的效果，
但是其中的 ScrollView 子项将停止正常运行。

而且我不确定我是否理解 'contentContainerStyle' 在 ScrollViews 上的作用，我也尝试过使用它，但我不确定我是否正确使用了它。

代码：

上面的代码导致“adContainer”占据了整个屏幕空间。
我不确定我做错了什么，但任何帮助将不胜感激！谢谢，平安。

这似乎是一个基本问题，但我似乎无法弄清楚或正确地对此进行搜索。我有一个View其他两个视图，其中一个有时是隐藏的。所以组件看起来像这样：

现在，我要做的是让组件在不存在Stuff时覆盖整个屏幕。Button但是，如果props.showButtonView是真的，并且我们确实希望看到视图，Button我只想看到顶部的按钮，然后剩下的就是Stuff组件中的任何内容。我该怎么做？它是基于弹性数字吗？

另外，您可能想知道为什么我首先需要将这两个分成单独的视图，原因是Stuff组件中还有其他不相关的东西覆盖了按钮并且不允许我单击它。无论如何，长话短说，View对于这种情况，两者的分离是强制性的。

使用 React Native，我希望使用 StyleSheet 来定义样式，然后在许多组件中使用该样式，但我想更改或覆盖一些组件的单个道具。例如，一组 10 个视图，有 5 种不同的颜色，但所有其他道具都相同。这可能吗？语法是什么样的？

我无法想象我必须定义 5 种不同的样式或使用内联样式。非常感谢您的帮助。

我正在弄乱我的代码，突然 ScrollView 决定消失。

出于某种原因，ScrollView 在字符栏视图内“正常”工作，但是当它在基本视图内时，它就不存在了。

我正在尝试在 android 设备上运行它

这个问题很烦人，让我有点压力。