模态框实现点击展开,点击空白关闭效果(React Native)

Love The Way You Lie 2021-07-24 22:48 1038阅读 0赞

思路:
    	模态框分为上下两部分,上部分放数据,下部分设置填充满且空白
    	设置模态框背景为透明,动画类型为none,模态框外部设置事件打开模态框
    	模态框内部空白区域通过TouchableWithoutFeedback包裹,设置事件关闭模态框

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
代码示例:

import React,{ Component} from 'react'
    import { 
      View,
      Text,
      StyleSheet,
      Modal,
      Button,
      Alert,
      TouchableOpacity,
      Image,
      FlatList,
      TouchableWithoutFeedback,
      Animated
    } from 'react-native'
    import TopBar from '../../components/common/Topbar'
    import Item from '../../components/common/goodsItem'
    
    class Ht extends Component{ 
        state={ 
            arr:[1,2,3,4,5,6,7,8,9],
            arr2:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
            refresh:false,
            show:false
        }
    
        renderMiddle()
        { 
            return (
                <TouchableOpacity
                    onPress={ ()=>{ 
                        this.setState({ 
                            show:true
                        })
                        // this.ax=Animated.Value(0);
                        // this
                    }}
                >
                    <Text>逛丢</Text>
                </TouchableOpacity>
                )
        }
        renderRight()
        { 
            return (
                <TouchableOpacity
                    onPress={ ()=>{ 
                        this.props.navigation.navigate('settings')
                    }}
                >
                    <Text>设置</Text>
                </TouchableOpacity>
                )
        }
        
        render()
        { 
            return(
    
                <View>
                    <TopBar
    
                        middleItem={ this.renderMiddle.bind(this)}
                        rightItem={ this.renderRight.bind(this)}
    
                    />
                    <FlatList
                        data={ this.state.arr}
                        renderItem={ ()=>{ 
                            return <Item />
                        }}
                        keyExtractor={ (item,index)=> index}
                        style={ { marginBottom:70}}
                        ItemSeparatorComponent={ ()=>{ 
                            return <View style={ { width:'100%',height:2,backgroundColor:'#ccc'}}></View>
                        }}
                        onEndReached={ ()=>{ 
                            this.setState({ 
                                arr:this.state.arr.concat(this.state.arr)
                            })
                        }}
                        refreshing={ this.state.refresh}
                        onRefresh={ ()=>{ 
                            this.setState({ 
                                refresh:true
                            })
                            this.setState({ 
                                arr:[1,2,3,4,5,6,7,8,9],
                                refresh:false
                            })
                        }}
                    />
    
                    <Modal
                        visible={ this.state.show}  
                        onRequestClose={ ()=>{ }}  
                        transparent={ true}	
                        animationType='none'
                    >
                        <View style={ [styles.wrap,this.state.show?styles.on:'']}>
                            { 
                                this.state.arr2.map((item,index)=>{ 
                                    return <View style={ styles.item} key={ index}>
                                            <Image style={ { width:40,height:40,marginBottom:5}} source={ { uri:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg'}}/>
                                            <Text>名称</Text>
                                        </View>
                                })
                            }
                        </View>
                        <TouchableWithoutFeedback
                            onPress={ ()=>{ 
                                this.setState({ 
                                    show:false
                                })
                            }}
                        >
                            <View style={ styles.other}>
    
                            </View>
                        </TouchableWithoutFeedback>
                    </Modal>
                    
                </View>
            )
        }
    }
    
    const styles = StyleSheet.create({ 
        wrap:{ 
            backgroundColor:'white',
            flexDirection:'row',
            flexWrap:'wrap',
            marginTop:40,
        },
        item:{ 
            width:'25%',
            height:50,
            justifyContent:'center',
            alignItems:'center',
            marginVertical:20
        },
        other:{ 
            flex:1,
        }
    
    })
    
    export default Ht

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/43bc996836e94d78a57f30b7e4acfb41.png