问题标签 [react-native-elements]

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.

0 投票
1 回答
1422 浏览

react-native - 通过主题设置导航栏的背景颜色以响应本机应用程序

我正在尝试通过 ThemeProvider 为我的应用程序设置导航栏背景颜色。我应该针对什么组件来设置样式。

App 组件的 Render :

可以看到列表项样式,但未设置标题背景颜色。如果我更改屏幕的导航选项,我可以在那里手动设置颜色。但我想避免在每个屏幕上都这样做。

0 投票
1 回答
178 浏览

react-native - 即使在头像元素中使用了圆形属性后,如何获得圆形头像

我正在尝试为我的用户个人资料屏幕实现一个圆形头像。但我不知道为什么它没有出现圆形。

我检查了我的样式表,还尝试将头像元素放入另一个视图标签中。但它不起作用。

我的个人资料屏幕:

我的样式表:

我希望我的头像元素是圆形的,但它是方形的。

0 投票
1 回答
3307 浏览

image - React-Native-Elements 卡未显示完整图像

我正在尝试使用 react-native-elements 制作卡片,但是我遇到了图像组件的问题。

图像从顶部和底部切掉;换句话说,没有显示整个图像。另一个问题是图像与卡片重叠。基本上,图像的尖角与显示图像的卡片的圆角重叠。

这是我的卡的代码:

问题出在

那是与卡片边界重叠的图像,并且没有 100% 显示。

0 投票
0 回答
193 浏览

react-native - TouchableHighlight 不覆盖整个(卡片)组件

TouchableHighlight 似乎没有涵盖我正在使用的整个(卡片)组件。

它似乎仅在我在组件中单击附近或打开时触发。

例如,当我单击没有文本的卡片组件中间时,它不起作用。

https://imgur.com/a/7MkEIrS

我展示了哪些区域不会触发 onPress 的照片。(没有足够的声誉发布图片)

我希望单击由 TouchableHighlet 包裹的 Comonent 上的任何位置以触发它的 onPress。

实际结果:中间没有触发 onPress 的“盲点”。

0 投票
1 回答
727 浏览

react-native - 为什么当 android build apk 方向改变时 Flatlist 不能正确渲染?

我正在使用 expo 构建一个食品储藏室服务应用程序,我正在从节点储藏室服务器获取项目列表,然后使用 Flatlist 在应用程序上呈现它们。

  • 一切都按预期工作,除了一件事,那就是方向改变时的平面列表渲染。
  • 使用 expo 应用程序进行测试时,即使方向发生变化,它也能完美运行。
  • 问题:在构建 android apk 并在设备 flatlist 上对其进行测试时,不再按预期呈现,例如:

-> 在纵向模式下启动应用程序时,您可以一直滚动到底部,但是当您旋转设备时,我无法一直滚动到底部,或者似乎可以,但其余项目似乎是剪裁超出设备显示边框。

样品 1

-> 相反,当我以横向模式启动应用程序时,我可以毫无问题地滚动到底部,但是当我将方向更改为纵向时,平面列表仅在屏幕中间呈现,我仍然能够滚动到结束它。

样品 2

我尝试传递给 extraData 以及将 flexgrow 添加到 contentContainerStyle,我也尝试使用 ScrollView 而不是 View,但没有明显的改进。

它让我感到困惑,它在 expo 应用程序中如何正常工作,但在 expo android 版本中却没有,有什么想法可以解决这个问题,或者是否有更好的选择?

我正在使用 expo 3.0.10 并且设备正在运行 Android 9 Pie

0 投票
1 回答
80 浏览

react-native - 按时间限制模态的最佳实践

我正在 React Native 中构建一个简单的测验应用程序。当用户得到正确答案时,我想显示一个弹出模式(React Native Elements),上面写着“Congratz”。我的工作如下:

其中,showModal 是通过我的 Redux 和 Redux Thunk 操作中的调度设置的。但是,我想将此限制为仅显示 2 秒然后消失。实现这一目标的最佳实践是什么?

目前我的thunk动作是:

但这会将系统锁定 2 秒?

0 投票
2 回答
2608 浏览

react-native - React Native Elements ButtonGroup - 满足条件时启用按钮

我正在使用react-native-elements带有 3 个按钮的 ButtonGroup。我需要在应用程序启动时禁用所有按钮,当满足条件时,我需要启用特定按钮。

我已经使用 false 标志禁用了所有按钮,但我不确定如何使用条件语句和状态启用特定按钮。

任何帮助,将不胜感激。

0 投票
1 回答
564 浏览

react-native - 使用 react-native 在 UI 中将标题与按钮、文本和右侧组件对齐的最佳做法是什么

我需要在我的标题部分对齐后退按钮和文本和右元素。

我正在使用 react-native-elements 组件进行对齐,但我提供的样式不适用于所有文本。如果文本很小,则无法按预期工作。此外,如果我尝试文本 LIST 的行距,则其中不会显示空格。参考expo的示例代码(这里我没有添加行距)并参考附件。

https://snack.expo.io/@niph/grounded-watermelon

我的问题是实现这一目标的最佳实践是什么。我已将 marginLeft 值添加为负数。

在此处输入图像描述

0 投票
1 回答
1046 浏览

react-native - FlatList 中的复选框

我想向用户展示一个可供选择的项目列表。这些项目来自 Redux 状态对象。它是设备上的联系人列表。

我使用了来自 React-Native的“FlatList”和来自 React-Native-Elements的“ListItem” 。ListItem 有一个复选框。

为了让用户选中/取消选中列表中的项目,他/她可以单击 CheckBox 或 ListItem 的任何部分。

我的第一次尝试:正如您在下面的代码中看到的,我不得不复制部分代码来实现这一点。有没有更聪明的方法(以避免代码重复)?

我的第二次尝试:我尝试使用一个函数。我收到错误消息(超出最大更新深度。)

感谢您的努力和时间来帮助...

0 投票
1 回答
982 浏览

react-native - 使用带有 react-native-elements 的 Font Awesome

我想react-native-element与反应本机应用程序一起使用。首先,我安装了成功的 react-elements。现在我正在尝试使用Icon类型为font-awesome. 但是图标显示不正确。我是否还需要单独安装 font-awesome 才能使图标正常工作?或者我在这里错过了什么。这是我的代码,

谢谢!