问题标签 [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.
react-native - React Native - 使用道具更改自定义组件按钮的颜色
我创建了一个自定义组件。onPress 和 title 有 prop 方法,但我还想添加另一个用于设置颜色的 prop。我尝试制作的结构如下所示
我的自定义 TextButton 组件文件在这里。
我找不到如何添加道具来改变一种特定的风格。如何添加颜色作为道具?
react-native - 在键盘模式下键入时反应原生的奇怪布局行为
初始动画后,我在 textInput 元素顶部有一个图像(徽标)。动画效果很好,并将徽标放在正确的位置
当我打开键盘时,标志停留在同一个地方。但是当我完全填满这些字段时,徽标会向下移动一点并停留在那里。一个
我只面临元素的问题。在我的应用程序的其余部分没有问题。同样,当键盘打开但将字段添加到某个级别时,不会发生此问题
我想也许 textinput 正在改变整体大小,所以我检查了它的样式,但我没有发现这样的东西。它的大小是一样的
我的组件
造型
我的 app.json 已经有了
动画代码以防万一
- 还有其他两个视图具有相同的位置:绝对属性,但它们不会移动。所以这个问题对我来说真的很奇怪*
所有元素都在绝对位置
javascript - React Native - 无法将状态变量传递给样式
我的代码获取一个 json 文件,计算一个值,我想将此值传递给 TouchableOpacity 的样式。以下是我的尝试:
完整代码:
任何帮助,将不胜感激。
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;
}
提前致谢!
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
确实存在:
我尝试了很多没有运气的事情:
- 删除 packages-lock.json 并重新安装
- 将软件包更新到最新版本
- 确保使用的软件包与 Expo SDK v41 兼容
- 将 expo-cli 更新到最新版本
- 运行此脚本以添加缺少的 Platform.js 文件
看起来有些人在使用这个问题,@react-native-community/viewpager
但我没有使用这个包,它也不在我的依赖项中。
世博诊断
css - 如何在图像 React-Native 上添加内阴影
如何在本机反应中应用像此图像这样的按钮内阴影? 臀部内阴影
typescript - 如何在 TypeScript 中声明对象属性?
这个代码片段给了我这个错误:
输入'JustifyContent | undefined' 不可分配给类型 '"space-around" | “之间的空间” | “空间均匀” | “中心” | “弹性端” | “弹性开始” | 不明确的'。类型 'string & {}' 不可分配给类型 '"space-around" | “之间的空间” | “空间均匀” | “中心” | “弹性端” | “弹性开始” | 不明确的'。
我想帮助解决这个问题。
欢迎在编写代码时提出建设性的批评。
react-native - Flex 在本机反应中没有平等地拆分组件
我正在尝试制作这样的布局:
为此,我制作了两个名为HalfWidthFullHeightCard
和的组件HalfWithHalfHeightCard
。
我将HalfWidthFullHeightCell
组件创建为?
基于cardText
卡片的宽度是自动计算的,并且在halfWidthCardText
我只有的样式表中padding: 10
接下来的HalfWithHalfHeightCard
一切都是一样的,除了样式是:
我将这两个组件放在一起的地方是:
现在有两个问题:
- 将灰色区域视为设备的宽度。
HalfWidthFullHeightCard
占用 100% 的空间和 - 位于
HalfWithHalfHeightCard
屏幕之外,并且与 的高度不同HalfWidthFullHeightCard
。
那么,我怎样才能使这些组件灵活,以便它们随着屏幕尺寸的变化而适应布局呢?