IMG_0074.PNG
IMG_0075.PNG
使用：
<CommonModalModule
animation={'fade'}
visible={this.state.modalVisible}
contentView={
<ComplaintView
ref='ComplaintView'
viewW={sizeDp(331)}
// viewH={sizeDp(201)}
homeView={
<ComplaintCell
cellH={201}
creator={this.addBlackItem ? this.addBlackItem.creatorName : ''}
act1={() => {
this.addBlackRequest(this.addBlackItem.bid,1,'')
}}
act2={() => {
//反馈内容
this.refs.ComplaintView._index = 1
}}
act3={() => {
//拉黑
this.blackCreatorId = this.addBlackItem.creatorId;
this.addBlackRequest(this.addBlackItem.creatorId,4,'')
}}
/>
}
backView={
<ComplaintBackCell
cellH={208}
act={(desc) => {
this.addBlackRequest(this.addBlackItem.bid,1,desc)
}}
/>
}
/>
}
close={() => {this.setState({modalVisible:false})}}
/>
根Modal js代码
import React, {Component} from 'react'
import {
View,
Text,
Image,
TouchableOpacity,
// Modal,
Platform,
StyleSheet, Dimensions,
StatusBar,
} from 'react-native'
import Modal from "react-native-modal";
const {width, height} = Dimensions.get("screen");
class CommonModalModule extends Component {
constructor(props) {
super(props);
this.state = {
visible: this.props.visible,
}
}
componentWillReceiveProps(props) {
this.setState({visible: props.visible});
}
close = () => {
requestAnimationFrame(() => {
if (this.props.close) {
// console.log("close","执行了父组件的close方法")
this.props.close();
} else {
// console.log("close","执行本组件方法")
this.setState({visible: false});
}
})
};
render() {
const {animation,baseStyle} = this.props;
return (
<Modal
style={{margin: 0}}
deviceWidth={width}
deviceHeight={height}
transparent={true}
visible={this.state.visible}
animationType={animation ? animation : 'slide'}
onRequestClose={() => this.close()}
>
<TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={this.close}//点击灰色区域消失
>
<StatusBar hidden={true}/>
<View style={[styles.container, baseStyle]}>
{this.renderContent()}
</View>
</TouchableOpacity>
</Modal>
);
}
renderContent = () => {
return (this.props.contentView);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.25)',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
// justifyContent: 'center',
// alignItems: 'center'
},
})
export default CommonModalModule;
根ScrollView js代码
import React, {Component} from 'react'
import {
View,
Text,
TouchableOpacity,
Image,
Animated,
ScrollView
} from 'react-native'
const {width, height} = Dimensions.get('window');
class ComplaintView extends Component {
constructor(props) {
super(props);
this._index = 0;// 当前正在显示的图片
}
render() {
const {homeView, backView, viewW,viewH} = this.props;
return (
<View style={{
justifyContent: 'center',
alignItems: 'center',
width: sizeDp(width),
height: sizeDp(height)
}}>
<View style={{width: viewW, height: viewH,backgroundColor:'#FFF',borderRadius:sizeDp(4)}}>
<ScrollView
scrollEnabled={false}
horizontal={true}
onTouchStart={() => this._onTouchStart()}
onTouchMove={() => console.log('onTouchMove')}
onTouchEnd={() => this._onTouchEnd()}
onScroll={() => this._onScroll()}
showsHorizontalScrollIndicator={false}
ref={(scrollView) => {
this._scrollView = scrollView;
}}
>
<Animated.View style={{width: viewW, height: viewH}}>
{homeView}
</Animated.View>
<Animated.View style={{width: viewW, height: viewH}}>
<View style={{flexDirection: 'row',alignItems:'center'}}>
<TouchableOpacity
style={{
width: sizeDp(50),
height: sizeDp(35),
justifyContent:'center',
paddingLeft: sizeDp(22),
}}
onPress={() => {this._index = 0}}
>
<Image
style={{width:sizeDp(8),height:sizeDp(13),}}
source={require('../images/back.png')}
/>
</TouchableOpacity>
<TouchableOpacity style={{flex:1,justifyContent:'center', height:sizeDp(35)}} activeOpacity={1}>
<Text style={{
textAlign: 'center',
paddingRight: sizeDp(50),
color:'#3478F6',
fontSize:fontDp(15),
}}
>选择</Text>
</TouchableOpacity>
</View>
{backView}
</Animated.View>
</ScrollView>
</View>
</View>
);
}
_onTouchStart() {
}
_onTouchEnd() {
// 先滑动到指定index位置，再开启定时任务
this._scrollView.scrollTo({x: this._index * this.props.viewW}, true);
}
_onScroll() {
}
}
export default ComplaintView;
第一页 js代码
import React, {Component} from 'react'
import {
View,
Text,
TouchableOpacity,
Image,
} from 'react-native'
class ComplaintCell extends Component{
constructor(props) {
super(props);
}
render() {
const {creator,act1,act2,act3} = this.props;
let blackCreator = '拉黑作者:' + creator;
return (
<View style={{paddingLeft:sizeDp(22)}}>
{this.cell(require('../images/uninterested.png'),'不感兴趣','减少这类内容',false,act1)}
{this.cell(require('../images/feedback.png'),'反馈垃圾内容','低俗、标题党等',true,act2)}
{this.cell(require('../images/pullBlack.png'),blackCreator,null,false,act3)}
</View>
);
}
cell(img,title,text,isNav,act) {
const {cellH} = this.props;
return (
<TouchableOpacity
style={{flexDirection:'row',justifyContent:'space-between',height:sizeDp(cellH/3),alignItems:'center',borderBottomWidth: isNav ? sizeDp(1) : 0,borderBottomColor:'#F5F5F5',borderTopWidth: isNav ? sizeDp(1) : 0,borderTopColor:'#F5F5F5'}}
onPress={act}
>
<View style={{flexDirection:'row',alignItems:'center'}}>
<Image style={{width:sizeDp(15),height:sizeDp(16),marginRight:sizeDp(22)}} source={img}/>
<View>
<Text style={{color:'#000',fontSize:fontDp(13)}}>{title}</Text>
{text ? <Text style={{color:'#999',fontSize:fontDp(10),marginTop:sizeDp(6)}}>{text}</Text> : null}
</View>
</View>
{isNav ? <Image style={{width:sizeDp(8),height:sizeDp(12),marginRight:sizeDp(22)}} resizeMode={'contain'} source={require('../images/my/new_arrow.png')}/> : null}
</TouchableOpacity>
)
}
}
export default ComplaintCell;
第二页 js代码
import React, {Component} from 'react'
import {
View,
Image,
TouchableOpacity,
Text,
} from 'react-native'
class ComplaintBackCell extends Component{
constructor(props) {
super(props);
}
render() {
const {act} = this.props;
return (
<View style={{paddingLeft:sizeDp(22)}}>
{this.cell('低俗色情',act)}
{this.cell('暴力血腥',act)}
{this.cell('人身攻击',act)}
{this.cell('诈骗信息',act)}
{this.cell('违法信息',act)}
</View>
);
}
cell(text,act) {
const {cellH} = this.props;
return (
<TouchableOpacity
style={{
height:sizeDp((cellH-35) /5),
justifyContent:'center',
borderTopWidth:sizeDp(1),
borderTopColor:'#F5F5F5'
}}
onPress={() => {act(text)}}
>
<Text>{text}</Text>
</TouchableOpacity>
)
}
}
export default ComplaintBackCell
之所以使用 react-native-modal 组件 请看这里
网友评论