问题标签 [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 回答
2865 浏览

react-native - react-native:flatlist中带有zIndex的组件似乎不起作用

主要渲染:

<DialogBox type="internet" />通过绝对位置设置样式的容器:

和对话框:

如果我删除absolute表单容器,它会显示。但我想在屏幕中间(不是平面列表中间)显示它。

但是为什么绝对不能使用 zIndex 呢?

我尝试将代码更改为:

或这个:

但这不起作用

0 投票
1 回答
2662 浏览

react-native - RN:左右对齐一行中的项目

sectionList这是用于连续显示事件名称的RN (0.59) 组件。连续渲染 3 个项目,renderItem从头部图像(左图像)开始,然后是事件名称,以另一个头部图像(右图像)结束。

这是上述渲染的输出:

在此处输入图像描述

所有行项目(左图、事件名称、右图)应垂直对齐。左侧图像和事件名称与行左侧正确对齐,但右侧图像应与行右侧水平对齐。如何更改我的 jsx 和样式以实现此 UI?

0 投票
1 回答
38 浏览

reactjs - 使用 flex 将项目添加到 n 列网格中

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

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

主屏幕视图

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

例如:

在此处输入图像描述

0 投票
1 回答
1084 浏览

reactjs - React-Native 背景图像 - 如何水平重复和 100% 高度

我需要一个水平重复的背景图像来填充父元素并占据 100% 的高度(不重复)。

我尝试将图像设置为“重复”和高度 100%,但没有成功。有什么建议如何在 react-native 中做到这一点?

0 投票
3 回答
1172 浏览

react-native - 如何在多个设备的 react-native 中找出内容的正确左右边距?

问题:

我用 React Native 创建了一个小的 iPhone 应用程序v 0.61 我的内容在左右两边都遵循一条大线,25px在较大的 iPhone(iPhone X+)上看起来非常好,但在 Iphone SE 上看起来不太好. 余量太大。如何找出每个设备的完美边距?

主要是我正在考虑将最左边的内容与状态栏的“当前时间”对齐,最右边的内容与左边的边距相同

像这样的东西:

在此处输入图像描述

0 投票
1 回答
226 浏览

javascript - 在父边框的 View 中显示以下 TouchableOpacity 选项

我在 React Native 中有一个类似组件的菜单,它被包装在一个视图中。此视图有 3 个选项。我希望每个选项在其下方都有一条线,几乎触及视图的边界。

为了实现这一点,我有三个带有文本和视图的 TouchableOpacities,它们都包装在同一个父级下。这就是我的代码的样子:

这里的问题是,通过将内部视图放置在底部marginTop: 25,我将文本推到其父级的顶部,这是我不想要的。这是这段代码的结果:

在此处输入图像描述

看看选项 2 和选项 3 如何在它们的父项中居中?这正是我希望选项 1 的样子,但红线位于灰色框的边缘,包含所有三个选项。

如何做到这一点?

0 投票
2 回答
947 浏览

javascript - 如何在 React Native 中的 StyleSheet.create 中继承样式(可能使用解构语法)

我想在StyleSheet.create的参数对象中重用样式,怎么做?

见代码:

最初,我想style2继承 allcolorbackgroundColorfrom style1,并扩展 1 个名为width. 所以我确实尝试了上面的代码,但随后出现错误“未声明 style1”。我意识到了问题,所以我替换...style1...this.style1,错误消失了,但它没有按我预期的那样工作。我想知道为什么并尝试在 javascript 中运行此代码段来测试行为:

它输出了结果undefined,但事实并非如此styles.style1。我再次意识到这个问题,在替换inherit: this.style1为之后inherit: styles.style1javascript 片段可以工作,但在 React Native 代码中却不行。

我想到现在为止,你明白我想要什么,所以我的问题是我怎么能做到这一点(在 React Native 中重用样式代码)?我认为会有很多解决方法,所以请尽可能多地给我。谢谢你。

这是我尝试过但没有得到预期结果的语法列表(或者因为我的大脑工作不正常,我错了):

0 投票
1 回答
35 浏览

reactjs - 添加到 react-native 视图的样式不能正常工作?

问题:

我创建了一个反应本机应用程序,并且添加到样式之一的样式无法正常工作。

我在主页中这样使用它。

但是在fineTitleContainer 之后添加到所有视图的样式不能正常工作。

这就是我面临的问题。

所以有人可以帮我解决这个问题。我尝试了很多来找到解决这个问题的方法,但我无法做到。谢谢!

0 投票
2 回答
620 浏览

react-native - 如何创建带断点的圆形滑块?

我是 react-native 的新手,我想在 react-native 中实现以下设计

图片链接

我正在努力实现这一目标

  • 蓝色圆圈是选择日期的滑块(日期选择器)
  • 更改日期时,滑块(日期选择器)内的圆圈会改变颜色
  • 最后是圆圈内的图像。

如果有人可以提供参考链接或我可以用来创建图像中显示的设计的库,那就太好了。

提前致谢。

0 投票
1 回答
106 浏览

react-native - React-native 自定义组件在其他组件的视图下渲染列表项

我创建了一个自动完成文本框组件,它基本上会在用户键入时呈现建议列表。当它是屏幕上唯一的组件时,它可以正常工作,但是当我尝试将它放在带有另一个组件的视图中时,它的视图似乎呈现在它旁边放置的组件上。当我将它们放在单独的视图中时,列表似乎呈现在它下面的视图下。我只是想知道是否有办法将列表呈现在屏幕上的其他视图之上?谢谢你的帮助