当我使用 fab 按钮时，react-native-paper CARD 组件不会隐藏

Question

我正在尝试激活一个 fab 按钮以在屏幕上显示选项，此外我的屏幕上还有一个 REACT-NATIVE-PAPER 卡片列表，但它无法将卡片隐藏在模态阴影后面，好像它有海拔或非常高的 zIndex，我试图降低 zIndex 但它不起作用，谢谢，这是项目 https://i.stack.imgur.com/7aNns.jpg

的图像

import React, { Component } from 'react';
import { FAB } from 'react-native-paper';
import { View, ScrollView } from 'react-native';
import AppbarNavigation from '../../components/appbar_navegation'
import ProjectCard from '../../components/project_card'

import styles from './style'

class Home extends Component {

  state = {
    open: false,
  };

  _onStateChange = ({ open }) => this.setState({ open });


  render() {

    const { navigation } = this.props;

    const { open } = this.state;


    return (
      <>
        <AppbarNavigation
          title='Proyectos'
          search
          searchfunction={() => console.log("funcion de buscar")}
          navigation={() => { navigation.toggleDrawer(); }}
        />


        <FAB.Group
          style={styles.fabgroup}
          open={open}
          disabled
          icon={open ? 'close' : 'plus'}
          actions={[

            { icon: 'star', label: 'Star', onPress: () => console.log('Pressed star') },
            { icon: 'email', label: 'Email', onPress: () => console.log('Pressed email') },
            { icon: 'bell', label: 'Remind', onPress: () => console.log('Pressed notifications') },
          ]}
          onStateChange={this._onStateChange}
          onPress={() => {
            if (open) {

            }
          }}
        />


        <View>
          <ScrollView [style={styles.scrollView}][1]>
            <View style={styles.menuContainer}>
              <ProjectCard
                imageProject={{ uri: 'https://picsum.photos/700' }}
                nameProject='proyecto'
                projectClient='Name User'
                projectProperty='NPH'
                projectModificate='13 Min'
                projectAuthor='Miller Watson'
              />
            </View>
            

          </ScrollView>
        </View>
      </>
    );
  }
}
export default Home;

Answer 1

解决方案是组件 orden，因此脚本更新为：

export default class Home extends Component {

 state = {
   open: false,
 };

 _onStateChange = ({ open }) => this.setState({ open });


 render() {

   const { navigation } = this.props;

   const { open } = this.state;


   return (
     <>
       <AppbarNavigation
         title='Proyectos'
         search
         searchfunction={() => console.log("funcion de buscar")}
         navigation={() => { navigation.toggleDrawer(); }}
       /> 

       <View>
         <ScrollView [style={styles.scrollView}][1]>
           <View style={styles.menuContainer}>
             <ProjectCard
               imageProject={{ uri: 'https://picsum.photos/700' }}
               nameProject='proyecto'
               projectClient='Name User'
               projectProperty='NPH'
               projectModificate='13 Min'
               projectAuthor='Miller Watson'
             />
           </View>


           

         </ScrollView>
       </View>

<FAB.Group
         style={styles.fabgroup}
         open={open}
         disabled
         icon={open ? 'close' : 'plus'}
         actions={[

           { icon: 'star', label: 'Star', onPress: () => console.log('Pressed star') },
           { icon: 'email', label: 'Email', onPress: () => console.log('Pressed email') },
           { icon: 'bell', label: 'Remind', onPress: () => console.log('Pressed notifications') },
         ]}
         onStateChange={this._onStateChange}
         onPress={() => {
           if (open) {

           }
         }}
       />


     </>
   );
 }
}

当我使用 fab 按钮时，react-native-paper CARD 组件不会隐藏

react-native-paper CARD component not hidding when i use a fab button

react-native

react-native-paper