当我使用 fab 按钮时，react-native-paper CARD 组件没有隐藏答案

【问题标题】：react-native-paper CARD component not hidding when i use a fab button当我使用 fab 按钮时，react-native-paper CARD 组件没有隐藏
【发布时间】：2020-09-26 03:53:06
【问题描述】：

我正在尝试激活一个 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;

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

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

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) {

           }
         }}
       />


     </>
   );
 }
}

【讨论】：