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

Question

我正在尝试激活一个工厂按钮，以便在屏幕上有选项，此外，我的屏幕上有一个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) {

           }
         }}
       />


     </>
   );
 }
}