在反应本机模式上添加 UI 元素，例如固定位置上的按钮
Posted
技术标签:
【中文标题】在反应本机模式上添加 UI 元素，例如固定位置上的按钮【英文标题】：Adding a UI element such as a button on fixed position on react native modal 【发布时间】：2021-06-24 13:04:10 【问题描述】：我很难将任何具有固定位置（浮动）的 UI 元素放置在模态内容超过屏幕高度的反应原生模态上。类似的问题发生在 Flash 消息/小吃栏等。它们呈现在模式内容的顶部/底部（如果您滚动则不可见），而不是显示在页面的顶部/底部。我使用 react-native-paper 的 FAB 创建了一个示例来演示这一点。链接在这里 - https://snack.expo.io/PnX5RCE1_?
示例代码：
import * as React from 'react';
import StyleSheet, View, Modal from 'react-native';
import FAB from 'react-native-paper';
import Container, Header, Body, Title, Content, ListItem, Text, Icon, Right from 'native-base';
const renderModal = () : React.ReactElement<any> =>
return(
<Modal
animationType="fade"
visible=true>
<Container>
<Header>
<Body>
<Title>Alert</Title>
</Body>
<Right>
<Icon name="closecircleo" type="AntDesign"></Icon>
</Right>
</Header>
<Content style=padding: 10>
<Text>Adding a lot of text to make the modal content go out of screen height</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text><Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text><Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text><Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<Text>Some Text Here</Text>
<FAB
style=styles.fab
small
icon="plus"
onPress=() => console.log('Pressed')
/>
</Content>
</Container>
</Modal>
);
const MyComponent = () => (
<View>
renderModal()
</View>
);
const styles = StyleSheet.create(
fab:
position: 'absolute',
margin: 16,
right: 0,
bottom: 0,
,
)
export default MyComponent;
【问题讨论】：
【参考方案1】：正如您自己指出的，Content 超出了屏幕高度。因为FAB 是它的子元素，所以它的定位是相对于Content 的总大小，而不是屏幕的大小。您应该在视图层次结构中将FAB 向上移动：
...
<Text>Some Text Here</Text>
</Content>
<FAB
style=styles.fab
small
icon="plus"
onPress=() => console.log('Pressed')
/>
</Container>
...
【讨论】：
想到了这个主意。不幸的是，我构建了<Content> 以在其中加载另一个功能组件，从而迫使我将 ref 传递给 FAB 到功能组件。
查看我在这里创建的一个案例，展示了真实应用程序中的组件嵌套：snack.expo.io/7s8ZavQ8r
在零食中，我看不到 FAB 的使用位置（没有 CustomComponent 的源代码）（也 - 仅供参考，零食无法编译）。
我认为您仍然应该努力拥有 FAB 顶层，因为这更好地反映了视图层次结构。如果它隐藏在某处的子视图中，例如，它可能会被您在某个时候添加的另一个视图所遮挡，这不是您想要的。也就是说，如果你觉得你必须在某处的 Content 的子项下渲染它，你仍然可以通过使用 Dimensions 模块来计算它的位置（const height = Dimensions.get('window'); 然后以你的风格 top: height - calculate FAB height
感谢您的建议。最终，我最终做到了——连同将 react-native Modal 的全部内容（包括标题等）移动到子组件中。感谢您的帮助。以上是关于在反应本机模式上添加 UI 元素，例如固定位置上的按钮的主要内容，如果未能解决你的问题，请参考以下文章
使用本机反应的 UI 测试。如何修复时间戳事件匹配错误：找不到匹配元素