问题标签 [react-native-flexbox]

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

javascript - React Native - 如何在绝对位置组件后面捕获触摸事件

我正在尝试创建一个弹出对话框(创建为具有位置:'absolute' 的组件)并在用户在弹出窗口之外单击时关闭它。

我是 React Native 的新手,所以我做的其他事情可能是错误的,请原谅我 :)

这是弹出窗口打开时的屏幕截图 在此处输入图像描述

这是一些代码:

从弹出组件:

这是托管组件:

我正在尝试做一些事情来获得一个可以捕捉在弹出窗口之外发生的点击的视图,但没有成功。

任何帮助都感激不尽,

谢谢,乔拉。

0 投票
0 回答
603 浏览

image - 用 resizeMode 反应原生图像包含,在子容器内移动

我目前正在编写一个反应原生应用程序,

我想在我的组件顶部显示 2 图像,所以我使用我的图像:

啊它有效,但是当我使用它时,它会创建一个子容器并在我的组件顶部和我的图像之间创建一个边缘

我怎样才能删除这个空间?

我试图删除空间的大小,但它不适用于所有设备......

0 投票
2 回答
83 浏览

react-native - 我似乎无法更改此反应本机视图的 flex 属性

我正在使用shoutem/ui http://shoutem.github.io/docs/ui-toolkit/components/rows组件,我似乎无法让这个行项目的高度更小 - 它似乎正在占用完全弯曲高度。如何让橙色区域变小?我尝试设置 flex 和 height 属性,但它似乎不起作用。

在此处输入图像描述

0 投票
2 回答
2824 浏览

react-native - 如何在 React Native 中将文本浮动到另一个文本上

在此处输入图像描述

这是一个尝试实现的示例,下面是组件结构的分解

在此处输入图像描述 这就是当前代码的样子:

我的问题在这里,因为文本与整个框居中对齐,所以我不能为文本和图标设置 flex 值,因为这会使它们有自己的空间并且不会浮动。

你能帮忙吗?如果您需要更多信息,请告诉我。

0 投票
1 回答
8118 浏览

javascript - React Native:如何设置 TextInput 的样式?

所以我在我的 React Native 应用程序中有组件
这个组件应该在底部呈现 TextInput。
当键盘显示时,容器(包括 TextInput 和发送按钮)应该移动到键盘上方。
另外,我想在每次用户单击键盘输入时更改输入高度,就像这样:在此处输入图像描述

但我所拥有的只是这些: 在此处输入图像描述在此处输入图像描述

下面是我的代码:
test_page2.js

我怎样才能像我的例子一样实现设计?
提前致谢

0 投票
1 回答
1582 浏览

image - React-Native 显示图像而不声明尺寸

在 React-Native 中,是否可以在不声明widthheight内部styleprop 的情况下显示图像?
我希望图像占据它拥有的所有空间或以其实际尺寸呈现。(例如 resizeMode 是否设置为覆盖。)

我阅读了这篇文章并尝试实施它的方法,但没有成功:https ://medium.com/the-react-native-log/tips-for-react-native-images-or-saying-goodbye-to-trial -and-error-b2baaf0a1a4d

这是我的代码:

但除非我指定硬编码widthheight.

0 投票
1 回答
1644 浏览

animation - React Native:如何动画视图从垂直堆叠到水平堆叠

所以,本质上,我有两个视图垂直堆叠以启动,按下按钮它们需要动画,因此第一个视图向左滑动,第二个视图上升并位于第一个视图的右侧。在第一个视图上调整 flex 并在第二个视图上更改顶部和左侧样式似乎很容易,在 IOS 上看起来很棒,但是在 Android 上,这会导致第二个视图在底部被切断时出现问题(大概是因为视图的 flex 或 height 对于内容来说不够高,但不幸的是我无法更改它,因为它会破坏下面其余内容的 flex 样式)。

关于如何解决这个问题的任何建议?

这可能是不可能的,但我想知道是否有办法使用 LayoutAnimation 或 Animated API 将这些视图从 flexDirection 的“列”设置为“行”?那将是疯狂的方便。

0 投票
2 回答
10870 浏览

react-native - 反应原生溢出弯曲时

在此处输入图像描述

所以对于上面的图像,我试图让“绿色”框环绕动态文本。注意蓝色和黄色文本框是如何flex: 'row'配置的,蓝色文本框位于 a 处flex: 2,黄色位于flex: 1.

在文本对于父容器来说太大之前,一切正常。

我希望绿色容器根据需要生长以适应弯曲的内在孩子。这可能与本机反应吗?

这是它在网络意义上的样子:

在此处输入图像描述

我尝试将绿色框设置为有一个flex: 1,但它太大了,因为它填满了整个屏幕。设置height是可能的,但我不知道最大内部组件的大小(至少没有一些黑客)。我什至试过了minHeight

有没有人尝试过这样的事情?我需要自己动态获取内部元素的高度吗?

更新 - 这是一段代码:

感谢您的关注。

0 投票
5 回答
31482 浏览

react-native - React-native:如何包装 FlatList 项目

我有一个查询返回的术语列表。每一个都是一个词。目前,我的 FlatList 将每个单词呈现为同一行上的一个按钮(horizo​​ntal={true}),我希望按钮像普通文本一样换行。但我绝对不想使用列功能,因为那样看起来不太自然。这可能是 FlatList 的一个坏用例吗?还有其他我可以使用的组件吗?

我收到的一条错误消息是:

警告:flexWrap: 组件不支持 wrap`` 。请考虑VirtualizedList改用numColumnswith FlatList

0 投票
2 回答
627 浏览

javascript - 在 React Native 中,如何定位和滑动大于屏幕视图的元素?

在下图中,每个面板都是屏幕的大小,它们作为一个大元素左右快速滑动。如果幻灯片过渡有问题,则 time = 0 可以,所以它是瞬时的。

每个面板的内容将在屏幕外保持安装状态,因为孩子中有一个 web 视图,我想防止网页重新加载(如果面板重新安装会发生这种情况)。我该怎么做呢?(编辑:没有插件或现成的导航系统)

解释