问题标签 [react-native-flexbox]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-native - flexWrap 中元素的对齐方式取决于元素的数量
我正在尝试将一些文本垂直居中放置在 flexWrap 中的框中。但它略高于或低于中心,取决于有多少盒子(???)。随着更多框的添加,观察所有的 Hello 向上移动:
世博小吃在这里:https ://snack.expo.io/@danbock/vertically-center-text
无论框数如何,如何使此文本保持在中心?
react-native - RNNv2 CustomBackButton 在导航栏上留下空白
我制作了一个自定义后退按钮组件,只是为了在某些屏幕上向用户弹出警报,他们可能正在更改实体的数据,如果Save
在离开屏幕之前没有点击,这些更改将丢失。
链接到小吃以获取完整的 CustomBackButton 组件代码
(零食不会运行,我只是用它来提供我正在使用的完整代码)
此逻辑/实现按预期工作,但外观与 iOS 上的本机后退按钮外观大不相同。我想知道如何最好地尽可能接近地模拟它,以便用户可以感觉到该按钮与整个应用程序中各处的本机体验相同。
你有什么建议?我愿意接受任何和所有建议,例如 flexbox 改进、hacky RNN mods 等。
react-native - 是否可以在 2 列 Flatlist 中进行行反转?
我在 react-native-android 中创建了一个 2 列的 FLatlist
我要这个
我试试这些:
在渲染项目中我flexDirection:'row-reverse'
也使用
但没有成功!
reactjs - 反应原生,图像不缩放 - resizeMode 没有有用的效果
我的代码如下所示:
相关样式如下所示:
问题是(方形)图像无法缩放以适应容器内部(注释掉的边框是为了确保容器在我认为它们所在的位置,并且尺寸正确 - 它们是)。
我已经看到了有关此的各种问题 - 有些涉及远程图像,而不是这里的情况。其他建议:
将 resizeMode 设置为 Image 元素的道具。
将 resizeMode 设置为样式。
使用样式中的宽度为“未定义”执行上述任一操作。
使用样式中的宽度为“自动”执行上述任一操作。
没有任何区别,唯一有效的是专门设置宽度和高度,如上面的代码所示。这在较新的(阅读:更大的)iPhone sim 上看起来不错,但会导致图像与 iPhone 5 sim 上的其他内容重叠。
要检查 resizeMode 道具是否有任何效果,我将其设置为“中心”(没有宽度或高度样式)。这更有希望,因为图像现在只比屏幕宽一点。但是,它仍然比视图高得多,这与 resizeMode: center 上的文档相矛盾:
center:将图像在视图中沿两个维度居中。如果图像大于视图,则将其均匀缩小,使其包含在视图中。
尝试将 width=auto/undefined 添加到 resizeMode="center",会导致图像根本不显示。
logoImageContainer 是一个定义的大小(通过 flexbox 定义),我只希望图像缩放和居中以适合它。
react-native - React-native对齐标题左,右后缀以及标题
这是我面临的问题:
我有一个名为 Header 的 react native 组件。标题有 3 个属性 - 左后缀(例如后退按钮)、右后缀(用于附加操作,有时 1 个按钮,有时 2 个按钮,有时没有)和标题。
布局规则如下:
- 无论是否存在右后缀或左后缀,标题都应始终位于标题的中心。如果存在右后缀但不存在左后缀,则标题仍应位于标题中间。
- 如果声明了右后缀和左后缀,则它们应该始终可见。这意味着如果我有右后缀 + 左后缀 + 一个很长的标题,标题应该缩小以为后缀腾出空间。
我做了零食来证明我的问题:https ://snack.expo.io/@anjayka/header-challenge
正如您所看到的,大多数布局都可以正常工作 - 如果我添加右后缀,标题保持在原位,如果我删除左后缀 - 它仍然在原位。问题出现在标题是一个非常长的文本之后 - 它扩展得如此之多以至于它完全推出了后缀。
任何帮助解决这个难题表示赞赏
react-native - React Native 中地图内容的底页,类似于谷歌地图 UI
我正在尝试在 React Native中实现类似于 Android 上的谷歌地图“探索”的 UI 布局(参见gif )。
在我的 UI 设计中,我在屏幕底部有应用程序导航选项卡,带有完整的页面地图背景,上面覆盖有来自选项卡上方的“底页”,顶部有一个搜索框组件。请参阅下面的 UI 草图。
我发现了各种看起来很有用的 react-native ui 组件,但我无法弄清楚将它们排列在我想要的布局中的样式。
我正在查看的几个底部组件,例如,rn-bottom-drawer 显示的 gif 与我正在尝试创建的内容类似,例如这个动画,但我找不到该 UI 的实际代码示例创建的。例如,同一个库示例仅在空屏幕上显示底部抽屉。
包装元素和样式的哪种组合可以让我创建所描述的布局?我来自 XAML 背景,这种布局很容易创建,但我无法理解如何在本机反应中做到这一点。