问题标签 [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 投票
2 回答
637 浏览

reactjs - 如何在本机反应中更改透明背景图像文本的颜色?

我有这张图片

古兰经图片

我希望它是这样的

古兰经图像黑暗

是否可以在本机反应中做到

0 投票
1 回答
48 浏览

react-native - React Native - 使用道具更改自定义组件按钮的颜色

我创建了一个自定义组件。onPress 和 title 有 prop 方法,但我还想添加另一个用于设置颜色的 prop。我尝试制作的结构如下所示

我的自定义 TextButton 组件文件在这里。

我找不到如何添加道具来改变一种特定的风格。如何添加颜色作为道具?

0 投票
1 回答
78 浏览

react-native - 在键盘模式下键入时反应原生的奇怪布局行为

初始动画后,我在 textInput 元素顶部有一个图像(徽标)。动画效果很好,并将徽标放在正确的位置

当我打开键盘时,标志停留在同一个地方。但是当我完全填满这些字段时,徽标会向下移动一点并停留在那里。一个

我只面临元素的问题。在我的应用程序的其余部分没有问题。同样,当键盘打开但将字段添加到某个级别时,不会发生此问题

我想也许 textinput 正在改变整体大小,所以我检查了它的样式,但我没有发现这样的东西。它的大小是一样的

我的组件

造型

我的 app.json 已经有了

动画代码以防万一

  • 还有其他两个视图具有相同的位置:绝对属性,但它们不会移动。所以这个问题对我来说真的很奇怪*

所有元素都在绝对位置

0 投票
3 回答
72 浏览

javascript - React Native - 无法将状态变量传递给样式

我的代码获取一个 json 文件,计算一个值,我想将此值传递给 TouchableOpacity 的样式。以下是我的尝试:

完整代码:

任何帮助,将不胜感激。

0 投票
1 回答
1463 浏览

css - 将 Tailwind 类转换为 css 内联样式

在这些天里,我正在努力从反应应用程序转换为反应原生应用程序;在这个 react 应用程序中,我使用 tailwind 来对组件进行样式化,因此我需要将 tailwind 类转换为内联 css,以便我可以使用在线工具将其转换为 react 原生样式表。有没有从 Tailwind 代码中获取 css 的方法或工具?

即(顺风代码)“ w-full h-full bg-black”转换后应该是(vanilla css){ width : 100%; height : 100%; background-color : black;}

提前致谢!

0 投票
0 回答
154 浏览

reactjs - Expo - 编译失败 - 无法解析“../Utilities/Platform”

我正在使用 Expo SDK v41 并在启动 Expo web 时遇到错误:

编译失败。/var/www/myapp/node_modules/react-native/Libraries/StyleSheet/processColor.js 未找到模块:无法解析 '/var/www/myapp/node_modules/react-native 中的 '../Utilities/Platform' /库/样式表'

该文件夹/var/www/myapp/node_modules/react-native/Libraries/Utilities 确实存在:

我尝试了很多没有运气的事情:

  1. 删除 packages-lock.json 并重新安装
  2. 将软件包更新到最新版本
  3. 确保使用的软件包与 Expo SDK v41 兼容
  4. 将 expo-cli 更新到最新版本
  5. 运行此脚本以添加缺少的 Platform.js 文件

看起来有些人在使用这个问题,@react-native-community/viewpager但我没有使用这个包,它也不在我的依赖项中。

世博诊断

0 投票
0 回答
53 浏览

react-native - 如何像这种设计一样在本机反应中为 View 设置 clipPath?

我想在 React Native 中实现这样的计划,但我无能为力。

0 投票
2 回答
99 浏览

css - 如何在图像 React-Native 上添加内阴影

如何在本机反应中应用像此图像这样的按钮内阴影? 臀部内阴影

0 投票
1 回答
53 浏览

typescript - 如何在 TypeScript 中声明对象属性?

在此处输入图像描述

这个代码片段给了我这个错误:

输入'JustifyContent | undefined' 不可分配给类型 '"space-around" | “之间的空间” | “空间均匀” | “中心” | “弹性端” | “弹性开始” | 不明确的'。类型 'string & {}' 不可分配给类型 '"space-around" | “之间的空间” | “空间均匀” | “中心” | “弹性端” | “弹性开始” | 不明确的'。

我想帮助解决这个问题。

欢迎在编写代码时提出建设性的批评。

0 投票
1 回答
49 浏览

react-native - Flex 在本机反应中没有平等地拆分组件

我正在尝试制作这样的布局:

在此处输入图像描述

为此,我制作了两个名为HalfWidthFullHeightCard和的组件HalfWithHalfHeightCard

我将HalfWidthFullHeightCell组件创建为?

基于cardText卡片的宽度是自动计算的,并且在halfWidthCardText我只有的样式表中padding: 10

接下来的HalfWithHalfHeightCard一切都是一样的,除了样式是:

我将这两个组件放在一起的地方是:

现在有两个问题:

在此处输入图像描述

  1. 将灰色区域视为设备的宽度。HalfWidthFullHeightCard占用 100% 的空间和
  2. 位于HalfWithHalfHeightCard屏幕之外,并且与 的高度不同HalfWidthFullHeightCard

那么,我怎样才能使这些组件灵活,以便它们随着屏幕尺寸的变化而适应布局呢?