Fatal编程技术网
  • react-native/
  • React native 添加UI元素，如react native modal上固定位置的按钮

React native 添加UI元素，如react native modal上固定位置的按钮

react-native

React native 添加UI元素，如react native modal上固定位置的按钮,react-native,react-native-paper,react-native-modal,React Native,React Native Paper,React Native Modal,我很难将任何具有固定位置（浮动）的UI元素放置在react本机模式上，其中模式内容超过屏幕高度。flash消息/快餐店等也会出现类似的问题。它们呈现在模式内容的顶部/底部（如果滚动，则不可见），而不是显示在页面的顶部/底部。我用react native paper的FAB创建了一个示例来演示这一点。链接这里- 示例代码： import * as React from 'react'; import { StyleSheet, View, Modal } from 'react-native';

我很难将任何具有固定位置（浮动）的UI元素放置在react本机模式上，其中模式内容超过屏幕高度。flash消息/快餐店等也会出现类似的问题。它们呈现在模式内容的顶部/底部（如果滚动，则不可见），而不是显示在页面的顶部/底部。我用react native paper的FAB创建了一个示例来演示这一点。链接这里-

示例代码：

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;

import*as React from'React'；
从“react native”导入{样式表、视图、模式}；
从“react National paper”导入{FAB}；
从“本机基础”导入{容器、标题、正文、标题、内容、列表项、文本、图标、右侧}；
const renderModal=（）：React.ReactElement=>{
返回(
警觉的
添加大量文本以使模式内容超出屏幕高度
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有些文字这里有些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有些文字这里有些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有些文字这里有些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
console.log（'Pressed'）}
/>
);
}
常量MyComponent=（）=>(
{renderModal（）}
);
const styles=StyleSheet.create({
晶圆厂：{
位置：'绝对'，
差额：16，
右:0,，
底部：0，
},
})
导出默认MyComponent；
正如您自己所指出的，
内容超过了屏幕高度。由于
FAB
是它的子级，因此它的位置相对于
内容的总大小，而不是屏幕的大小。您应该在视图层次结构中将
FAB
向上移动：


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



{…}
这里有一些文字
console.log（'Pressed'）}
/>
{...}

想到了这个想法。不幸的是，我构建了
，在其中加载了另一个功能组件，从而迫使我将ref-to-FAB向下传递到功能组件。请看我在这里创建的一个案例，其中显示了真实应用程序中的组件嵌套：在snack中，我看不到FAB的使用位置（CustomComponent没有源代码）（同时-仅供参考，零食未编译）。我认为您仍然应该努力获得FAB顶层，因为这更好地反映了视图层次结构。例如，如果它隐藏在某个子视图中，它可能会被您在某个点添加的另一个视图所遮挡，而这不是您想要的。也就是说，如果您觉得您必须在某个时候将其呈现在某个内容的子视图下e、 您仍然可以使用Dimensions模块（
const{height}=Dimensions.get（'window'）；
然后以您的风格
top:height-{calculate FAB height}
感谢您的建议。最终，我完成了这项工作，并移动了react-native-Modal的全部内容（包括标题等）进入子组件。感谢您的帮助。