问题标签 [react-native-stylesheet]

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 回答
2362 浏览

reactjs - React Native - stickyHeaderIndices 不适用于 SectionList

我正在尝试制作一些标题以粘在 SectionList 的顶部,但似乎stickyHeaderIndices={[0]}没有按预期工作。这是部分列表:

我试图将标题放在节列表之外,但标题更大,我无法在该标题组件内滚动。

0 投票
1 回答
340 浏览

css - React Native:保持图标位置固定

我正在使用react-native-autocomplete-input组件的<AutoComplete> 我在左侧(搜索)和右侧(关闭)插入了两个图标AutoComplete

无需键入键,UI 看起来很好,如下所示:

在此处输入图像描述

但是当我开始输入时,搜索和关闭图标都会被推到建议的中心:

在此处输入图像描述

任何建议,我如何将两个图标固定在其顶部位置。请帮忙。

0 投票
2 回答
328 浏览

reactjs - 在 react-native 中添加表单验证,删除多余的空格

我有一个如下所示的登录表单 (1): 在此处输入图像描述

当我添加表单验证时,它看起来像这样(2): 在此处输入图像描述

textInputs 之间的 spcaes 是因为我有这样的东西:

当输入不正确时(3): 在此处输入图像描述

我想保持表单与(1)相同,当字段未正确填写时,它会转到(3),当任何字段填写正确时,错误文本应该消失,加上区域停留在,当您启动表单时,表单的元素之间存在间隙,看起来像(2),

这是我的错误文本字段:

这是验证:

如何删除空格但保留错误消息?

0 投票
1 回答
321 浏览

reactjs - 动画图像没有透明背景

在我的 react-native 应用程序中,我想将旋转徽标呈现为屏幕的正确标题。

微调器组件返回一个Animated.Image

我保存在img文件夹中的图像具有透明背景(从此处下载),但动画图像呈现为白色背景。

在此处输入图像描述

注意:添加backgroundColor: 'transparent'不起作用。

0 投票
1 回答
253 浏览

react-native - 为什么 flatlist 无法放入容器中 - React Native

我的平面列表正在包装,但我不希望它。这是特定于数据类型的吗?

如果我使用平面列表,这是相关代码:

当我渲染这段代码时,“Habilidades”不在其他两个统计数据之下。相反,它在右侧包装并结束: 使用 FlatList 渲染

当我删除平面列表并使用占位符文本时,它可以工作:

上面的代码呈现以下内容: 带占位符的代码

abilityContainer、statsLabel 和 statsData 的样式在这里:

0 投票
1 回答
115 浏览

react-navigation - 在样式表中使用主题

我正在使用反应导航的主题功能在暗模式和亮模式之间切换并获取模式的颜色const { colors } = useTheme();但是我正在尝试在样式表中设置颜色。我该怎么做。我一直在{[styles.subtitle, colors.text]}为组件设置样式。有没有更清洁的方法来做到这一点?比如在styles.subtitle对象里面设置颜色?

0 投票
1 回答
513 浏览

react-native - 如何画一个圆环

我想在 react-native 项目中画一个圆环。我希望圆环组件在使用时可以自定义其大小。这是我尝试过的:

当我使用我的Ring组件时,如下所示:

然而,它显示了一个实心圆圈而不是环形。我怎样才能有一个圆环?

0 投票
1 回答
23 浏览

react-native - 顶视图和底视图高度是固定的,中间视图需要适合剩余空间

我有 3 个视图top view, middle view, bottom view. top viewand有它的bottom view组件,它们的高度固定在垂直对齐的container view. 现在,我需要middle view高度灵活,即高度middle view可以根据屏幕高度而变化,它需要适合剩余空间。你能帮我弄清楚这个吗?

0 投票
0 回答
245 浏览

react-native - 如何使用 Sectionlist 为 react-native 中的粘性部分标题添加背景?

在 react-native 中,使用 SectionList,我希望有一个带有背景颜色的粘性部分标题,但只有当元素是粘性的时。到目前为止,我所做的是将视图位置设置为绝对位置。问题是我找不到获取视图后面的项目的方法,这与嵌套在下面的图片不同:

没有应用 zIndex'es:

没有应用 zIndex'es

到目前为止,我一直尝试设置不同的 zIndex,但它似乎不起作用,因为所有内容都在视图后面,包括 SectionHeaders,尽管 zIndex 比视图高。我想,这是因为 zIndex 是相对于父级的。一张图片嵌套在下面:

应用 zIndex 时:

应用了 zIndex'es

总结一下:如何确保项目位于视图后面,以模拟背景,位于粘性部分标题上?其他获得粘性部分标题背景的解决方案也非常感谢。

我在下面插入了代码(使用 zIndex'es)。

0 投票
1 回答
2048 浏览

react-native - 如何在 react-native / expo 中使用Dimensions获得真实的屏幕分辨率并设置应用程序样式?

我正在开发一个 react-native/expo 应用程序。昨天我到了造型阶段才知道

Dimensions.get('window').width

返回我的设备(一个 android,一个 iPad)的实际宽度的一半,但模拟的 android 设备的实际宽度。它看起来像物理设备以某种半/半分辨率模式运行应用程序。

不得不说,它完全破坏了我对应用程序进行样式设置的想法,因为我使用 EStyleSheet (react-native-extended-stylesheet) 进行动态样式构建,这取决于Dimensions 获得的值以及诸如maxWidth之类的东西不会做很多有道理,是吗?

有什么方法可以强制 react-native/expo 应用程序以“全分辨率”运行?

谢谢!