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

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

效果图:

代码示例:

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