思路:
模态框分为上下两部分,上部分放数据,下部分设置填充满且空白
设置模态框背景为透明,动画类型为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