问题标签 [react-native-flexbox]

我有一个如下所示的反应组件类

两个 touchableopacity 组件都具有 flex 2 的值，因此它们在窗口中均分。当按下其中一个 touchableopacity 时，我想在 flex 到 2 到 4 之间进行转换，以便一个框可以随着动画而增长，并将其标记为“活动”或“选定”之一。我已经搜索了很多次，但由于我是 ReactNative 的初学者，我找不到任何合适的方法。

这是可能的还是可以实现的？

//编辑完整代码

这个问题与这个问题相似，但是我有不同的要求。我有一个<TabBarIOS>渲染<Camera>来自react-native-camera的组件。<Camera>我需要在组件底部但在组件上方放置一个按钮来拍照<TabBarIOS>。

index.ios.js

CameraTab.ios.js

我尝试了各种方法，但是当alignItems: 'flex-end'处于容器组件的样式中时，捕获按钮总是隐藏的。

它应该看起来像这样：

编辑：我发现这个问题描述了一种解决方法（将按钮组件放在相机组件之外）。根据 RN 关于高度和宽度的文档，该解决方案似乎适用于所有屏幕尺寸。但是，这对我不起作用，因为我想要一个带有相机内图标的子视图。

我正在尝试设置图像的尺寸，以便宽度始终占据卡片的整个宽度（减去水平边距）并具有灵活的高度，以便它可以根据需要进行缩放。

我怎样才能做到这一点？看起来样式需要一个高度，它不会接受null。

我已经尝试了很多使用各种 resizeModes、高度、宽度等的组合。

这是组件：

这是我当前的代码：

从这里的示例中，我想知道当项目不能放入一个时，是否可以将它们浮动到新行中？

blue彩色项目应在新行中。flexbox可以吗？

我有一个问题，文本离开屏幕而不是换行。

这是代码和样式表。感谢有人可以让我知道发生了什么以及如何解决。

参考了这篇文章，但无法让它工作。

样式表：

我正在尝试为拖放游戏构建布局，我希望将拖动占位符（其中有一个未确定的数量，以黑色显示）排列成行，周围有空间并垂直对齐。我可以使用这样的常规 flexbox 轻松实现这一点：

使用此代码：

但是，当我尝试在 React Native flexbox 中执行此操作时，我得到了：

使用此代码：

我在盒子周围放了一个小边距，看看它们在哪里。

如果我减少框的数量使它们不换行，那么 alignItems 属性似乎可以按如下方式工作：

但是一旦它们包裹起来，它们就不再沿着横轴对齐中心，它们会进入 flex-start 并且我似乎无法从那里移动它们？

提前致谢。

我正在尝试设计这个设计react-native。这是我为此编写的代码，但这不是我想要的。这仅适用于一个屏幕，如果我更改屏幕尺寸，那么一切都无法正常工作。

这看起来像绝对布局。我应该进行哪些更改以使其适用于所有屏幕尺寸。

预期状态：

当前状态：

连结 4 - 768x1280

连结 6P - 1440x2560

我已经开始在 React native 上使用 flex box，在 CSS 上你应该将显示设置为 flex，但在 RN 上，这是默认设置的。

什么对可以设置 alignItems、justifyContent 的容器对象进行分类？

它只需要一个视图吗？还是每个组件都是潜在的容器？

我有一个文件 weatherProject.js ：

weatherProject 需要预测模块var Forecast = require('./Forecast');：

但是，在集成了预测模块后，我在 android 虚拟手机上看不到文本和输入。我的猜测是它来自样式和 flexbox，因为代码编译得很好，如果我删除 flex: 1 语法，它会显示文本，为什么根据你的说法，现在的代码在屏幕上没有显示任何内容？（我的 avd 机器是 Nexus 4 型号）

感谢您的帮助

我一直在尝试在我的 React Native 应用程序中创建一个函数，该函数输出一个带有 dropcap 的段落。这是我正在使用的代码：

contentRef只是一个从另一个文件传递并包含相关文本的字符串。

这是iOS输出：

这是Android版本：

可以看到，iOS版把第一行的顶部剪掉了，在第一行下面加了padding/margin，看起来不太对劲。与此同时，正如我所料，Android 版本正在输出。

谁能建议为什么会这样？

编辑： 建议从代码中删除 lineHeight。这改变了事情，但没有解决问题：

IOS：

安卓：