在 React Native Modal 的固定位置添加一个 UI 元素，例如按钮

Question

我很难将任何具有固定位置（浮动）的 UI 元素放置在模态内容超过屏幕高度的 React 本机模态上。类似的问题发生在 flash message/snack bar 等。它们呈现在模态内容的 top/bottom 处（如果滚动则不可见）而不是显示在 top/bottom 处页。我使用 react-native-paper 的 FAB 创建了一个示例来演示这一点。 Link 这里 - 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;

Answer 1

正如您自己所说，Content 超出了屏幕高度。由于 FAB 是 child，它的位置是相对于 Content 的总大小，而不是屏幕的大小。您应该在视图层次结构中向上移动 FAB：

{...}
            <Text>Some Text Here</Text>
          </Content>
          <FAB
            style={styles.fab}
            small
            icon="plus"
            onPress={() => console.log('Pressed')}
          />
        </Container>
{...}

在 React Native Modal 的固定位置添加一个 UI 元素，例如按钮

Adding a UI element such as a button on fixed position on react native modal

react-native

react-native-paper

react-native-modal