SwiperItem.js
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import Toast from 'react-native-root-toast';
import { dispatch } from '~/modules/redux-app-config';
import UI from '~/modules/UI';
import { checkWorkLearnPermission, sendEvent2Sheet } from '~/modules/services/utils';
const unit11 = require('../img/unit1-1.jpg');
const unit12 = require('../img/unit1-2.jpg');
const unit13 = require('../img/unit1-3.jpg');
const unit14 = require('../img/unit1-4.jpg');
const unit15 = require('../img/unit1-5.jpg');
const unit16 = require('../img/unit1-6.jpg');
const unit1qizhong = require('../img/unit1-qizhong.jpg');
const unit1qimo = require('../img/unit1-qimo.jpg');
const unit21 = require('../img/unit2-1.jpg');
const unit22 = require('../img/unit2-2.jpg');
const unit23 = require('../img/unit2-3.jpg');
const unit24 = require('../img/unit2-4.jpg');
const unit25 = require('../img/unit2-5.jpg');
const unit26 = require('../img/unit2-6.jpg');
const unit2qizhong = require('../img/unit2-qizhong.jpg');
const unit2qimo = require('../img/unit2-qimo.jpg');
const unit31 = require('../img/unit3-1.png');
const unit32 = require('../img/unit3-2.png');
const unit33 = require('../img/unit3-3.png');
const unit34 = require('../img/unit3-4.png');
const unit35 = require('../img/unit3-5.png');
const unit36 = require('../img/unit3-6.png');
const unit3qizhong = require('../img/unit3-qizhong.png');
const unit3qimo = require('../img/unit3-qimo.png');
const unit41 = require('../img/unit4-1.jpg');
const unit42 = require('../img/unit4-2.jpg');
const unit43 = require('../img/unit4-3.jpg');
const unit44 = require('../img/unit4-4.jpg');
const unit45 = require('../img/unit4-5.jpg');
const unit46 = require('../img/unit4-6.jpg');
const unit4qizhong = require('../img/unit4-qizhong.jpg');
const unit4qimo = require('../img/unit4-qimo.jpg');
const unit51 = require('../img/unit5-1.jpg');
const unit52 = require('../img/unit5-2.jpg');
const unit53 = require('../img/unit5-3.jpg');
const unit54 = require('../img/unit5-4.jpg');
const unit55 = require('../img/unit5-5.jpg');
const unit56 = require('../img/unit5-6.jpg');
const unit5qizhong = require('../img/unit5-qizhong.jpg');
const unit5qimo = require('../img/unit5-qimo.jpg');
const unit61 = require('../img/unit6-1.jpg');
const unit62 = require('../img/unit6-2.jpg');
const unit63 = require('../img/unit6-3.jpg');
const unit64 = require('../img/unit6-4.jpg');
const unit65 = require('../img/unit6-5.jpg');
const unit66 = require('../img/unit6-6.png');
const unit6qizhong = require('../img/unit6-qizhong.jpg');
const unit6qimo = require('../img/unit6-qimo.jpg');
const studyImg = require('../img/study.png');
const studyGray = require('../img/study_disabled.png');
const practiceImg = require('../img/practice.png');
const practiceGray = require('../img/practice_disabled.png');
const readImg = require('../img/read.png');
const readGray = require('../img/read_disabled.png');
const testImg = require('../img/test.png');
const testGray = require('../img/test_disabled.png');
const scoreImg = require('../img/score.png');
const scoreGray = require('../img/score_disabled.png');
const completeImg = require('../img/complete.png');
const redCircleImg = require('../img/red_circle.png');
class SwiperItem extends Component {
constructor(props) {
super(props);
this.state = {};
this.swiperWidth = UI.size.deviceWidth - UI.scaleSize(32) * 2;
this.unitImgList = [
[unit11, unit12, unit13, unit1qizhong, unit14, unit15, unit16, unit1qimo],
[unit21, unit22, unit23, unit2qizhong, unit24, unit25, unit26, unit2qimo],
[unit31, unit32, unit33, unit3qizhong, unit34, unit35, unit36, unit3qimo],
[unit41, unit42, unit43, unit4qizhong, unit44, unit45, unit46, unit4qimo],
[unit51, unit52, unit53, unit5qizhong, unit54, unit55, unit56, unit5qimo],
[unit61, unit62, unit63, unit6qizhong, unit64, unit65, unit66, unit6qimo],
];
this.imgList = {
学习: [studyImg, studyGray],
练习: [practiceImg, practiceGray],
阅读: [readImg, readGray],
考试: [testImg, testGray],
成绩: [scoreImg, scoreGray],
};
}
selectOption(option, optionIndex) {
const { name, id } = option;
switch (name) {
case '学习':
this.goStudy(id, optionIndex, option);
break;
case '练习':
this.goPractice(id, optionIndex, option);
break;
case '阅读':
this.goReading(id, optionIndex);
break;
case '考试':
this.goTest(id, optionIndex);
break;
case '成绩':
this.goExamList(id, optionIndex);
break;
default:
break;
}
}
goExamList(option_id, optionIndex) {
const { gradeId, unitId, lessonId, lessonName } = this.props.data;
const checkStatus = this.check(optionIndex);
if (!checkStatus) {
return;
}
this.props.navigation.navigate('examList', {
grade_id: gradeId,
unit_id: unitId,
lesson_id: lessonId,
option_id,
type: 'test',
name: lessonName,
});
}
goTest(option_id, optionIndex) {
const { gradeId, unitId, lessonId, lessonName } = this.props.data;
const checkStatus = this.check(optionIndex);
if (!checkStatus) {
return;
}
this.props.navigation.navigate('examPractice', {
transition: 'forVertical',
grade_id: gradeId,
unit_id: unitId,
lesson_id: lessonId,
option_id,
name: lessonName,
});
}
goReading(option_id, optionIndex) {
const { gradeId, unitId, lessonId } = this.props.data;
const checkStatus = this.check(optionIndex);
if (!checkStatus) {
return;
}
dispatch('GET_LESSON_BOOK', {
lesson_id: lessonId,
res: res => {
if (res && res.msg === 'Success') {
this.props.navigation.navigate('cover', {
item: res.result.book,
extra: {
grade_id: gradeId,
unit_id: unitId,
lesson_id: lessonId,
option_id,
type_id: 5,
},
});
}
},
});
}
goPractice(option_id, optionIndex, option) {
const { gradeId, unitId, lessonId } = this.props.data;
const checkStatus = this.check(optionIndex);
if (!checkStatus) {
return;
}
this.props.navigation.navigate('practice', {
transition: 'forVertical',
grade_id: gradeId,
unit_id: unitId,
lesson_id: lessonId,
option_id,
type: 'practice',
option,
});
}
goStudy(option_id, optionIndex, option) {
const { gradeId, unitId, lessonId, optionList, current } = this.props.data;
const checkStatus = this.check(optionIndex);
if (!checkStatus) {
return;
}
dispatch('GET_OPTIONAL_STUDY', {
option_id,
res: res => {
if (res && res.msg === 'Success') {
this.props.navigation.navigate('study', {
transition: 'forVertical',
data: res.result.study_list,
hosts: res.result.school_hosts,
extra: {
grade_id: gradeId,
unit_id: unitId,
lesson_id: lessonId,
option_id,
},
nextOptionId: optionList[1].id,
option,
});
}
},
});
}
newestUser = user => {
if (user && user.user && user.user.is_member === 'false') {
this.props.navigation.navigate('order');
}
};
check(optionIndex) {
const { data, index, userInfo, navigation } = this.props;
const { current, over, overSteps, steps } = data;
if (over === '1') {
return true;
}
if (current === '0') {
Toast.show('请把前面的课程学完', { position: Toast.positions.CENTER });
return false;
}
if (index > 0) {
// 校验用户单词宝使用权限
const permission = checkWorkLearnPermission(userInfo);
if (permission.status === 'fail') {
sendEvent2Sheet({
msg: data.msg,
userInfo,
redirectRouteName: 'word',
});
return false;
}
}
if (parseInt(overSteps) - 1 >= optionIndex) {
// 表示已经阅读过了
return true;
}
if (parseInt(overSteps) === optionIndex) {
return true;
}
Toast.show('请将前面的练习做完', { position: Toast.positions.CENTER });
return false;
}
render() {
const { data, ownIndex, userInfo } = this.props;
const {
unitName,
lessonId,
lessonName,
optionList,
over,
overSteps,
current,
isUnitTest,
} = data;
return (
<View style={styles.container}>
<View style={styles.container2}>
<View style={styles.backContainer}>
<Image
source={this.unitImgList[userInfo.user.study_year - 1][ownIndex % 8]}
style={styles.unitImg}
resizeMode="contain"
/>
<View
style={[
styles.header,
{
backgroundColor: 'rgba(255,255,255,0.3)',
},
]}
>
{isUnitTest ? (
<View style={{ alignSelf: 'center' }}>
<Text style={styles.unitText}>{lessonName}</Text>
</View>
) : (
<View>
<Text style={styles.unitText}>{unitName}</Text>
<Text style={styles.lessonText}>{lessonName}</Text>
</View>
)}
</View>
</View>
<View style={styles.bottom}>
<View style={styles.bottom2}>
{optionList.map((option, optionIndex) => {
(option.unitName = unitName), (option.unitId = lessonId);
let status = 'GRAY'; // 'GRAY' 表示icon、文字都为灰色，'AFTER' 表示即将阅读', 'BEFROE' 表示已经阅读
if (current === '1') {
if (parseInt(overSteps) - 1 >= optionIndex) {
// 表示已经阅读过了
status = 'BEFORE';
} else if (parseInt(overSteps) === optionIndex) {
status = 'WILL';
}
}
if (over === '1') {
status = 'BEFORE';
}
return (
<TouchableOpacity
key={lessonId + option.id + option.name}
style={styles.touchView}
onPress={this.selectOption.bind(this, option, optionIndex)}
>
<View>
<Image
style={styles.icon}
source={
status === 'GRAY'
? this.imgList[option.name][1]
: this.imgList[option.name][0]
}
resizeMode="contain"
/>
{/* {status !== 'GRAY' &&
option.name !== '成绩' && (
<Image
source={status === 'BEFORE' ? completeImg : redCircleImg}
style={status === 'BEFORE' ? styles.completeImg : styles.redCircleImg}
/>
)} */}
</View>
<Text style={status === 'GRAY' ? styles.name2 : styles.name}>
{option.name}
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: UI.size.deviceWidth - UI.scaleSize(28) * 2,
height: UI.scaleSize(455),
justifyContent: 'center',
alignItems: 'center',
},
container2: {
width: UI.size.deviceWidth - UI.scaleSize(32) * 2,
height: UI.scaleSize(447),
borderRadius: UI.scaleSize(20),
overflow: 'hidden',
backgroundColor: 'white',
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.5,
shadowRadius: 5,
shadowColor: UI.color.black,
elevation: 4,
},
backContainer: {
width: UI.size.deviceWidth - UI.scaleSize(32) * 2,
height: UI.size.deviceWidth - UI.scaleSize(32) * 2,
borderRadius: UI.scaleSize(20),
overflow: 'hidden',
},
header: {
width: UI.size.deviceWidth - UI.scaleSize(32) * 2,
height: UI.scaleSize(87),
justifyContent: 'center',
paddingHorizontal: UI.scaleSize(18),
borderTopLeftRadius: UI.scaleSize(20),
borderTopRightRadius: UI.scaleSize(20),
},
unitText: {
fontSize: UI.scaleSize(22),
color: 'white',
fontWeight: 'bold',
},
lessonText: {
fontSize: UI.scaleSize(16),
color: 'white',
marginTop: UI.scaleSize(6),
},
center: {
width: UI.size.deviceWidth - UI.scaleSize(32) * 2,
height: UI.scaleSize(213),
borderBottomLeftRadius: UI.scaleSize(20),
borderBottomRightRadius: UI.scaleSize(20),
},
unitImg: {
position: 'absolute',
bottom: 0,
left: 0,
width: UI.size.deviceWidth - UI.scaleSize(32) * 2,
height: UI.size.deviceWidth - UI.scaleSize(32) * 2,
},
bottom: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
bottom2: {
flexDirection: 'row',
justifyContent: 'space-between',
width: UI.size.deviceWidth - UI.scaleSize(32) * 2,
paddingHorizontal: UI.scaleSize(50),
},
touchView: {
justifyContent: 'center',
alignItems: 'center',
},
icon: {
height: UI.scaleSize(33),
},
name: {
fontSize: UI.scaleSize(16),
color: '#3C3C5C',
fontWeight: 'bold',
marginTop: UI.scaleSize(10),
},
name2: {
fontSize: UI.scaleSize(16),
color: '#BFBFBF',
fontWeight: 'bold',
marginTop: UI.scaleSize(10),
},
redCircleImg: {
position: 'absolute',
top: 0,
right: 0,
width: UI.scaleSize(8),
height: UI.scaleSize(8),
},
completeImg: {
position: 'absolute',
bottom: 0,
right: 0,
width: UI.scaleSize(15),
height: UI.scaleSize(15),
},
});
export default SwiperItem;
Swiper.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Carousel from 'react-native-snap-carousel';
import UI from '~/modules/UI';
import SwiperItem from './SwiperItem';
class Swiper extends Component {
constructor(props) {
super(props);
this.state = {};
this.swiperWidth = UI.size.deviceWidth - UI.scaleSize(28) * 2;
}
renderItem({ item, index }) {
return (
<SwiperItem
data={item}
ownIndex={index}
index={this.props.index}
navigation={this.props.navigation}
userInfo={this.props.userInfo}
/>
);
}
onSnapToItem(index) {
const { onSnapToItem } = this.props;
onSnapToItem(index);
}
snapToItem() {
this.carousel && this.carousel.snapToItem(0);
}
render() {
const { data, hosts } = this.props;
console.log('sssdata: ', data);
if (data.length === 0) {
return null;
}
return (
<View style={styles.container}>
<Carousel
ref={o => {
this.carousel = o;
}}
data={data}
renderItem={this.renderItem.bind(this)}
sliderWidth={this.swiperWidth}
itemWidth={this.swiperWidth}
containerCustomStyle={styles.slider}
onSnapToItem={this.onSnapToItem.bind(this)}
layout="default"
removeClippedSubviews={false}
layoutCardOffset={UI.scaleSize(10)}
// swipeThreshold={20}
// activeSlideOffset={20}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: UI.size.deviceWidth - UI.scaleSize(28) * 2,
height: UI.scaleSize(455),
marginTop: UI.scaleSize(40),
// backgroundColor: 'red',
},
slider: {
overflow: 'visible',
backgroundColor: 'red',
},
});
export default Swiper;
index.js
onSnapToItem = index => {
this.setState({ index });
};
<Swiper
ref={o => {
this.swiper = o;
}}
data={data}
host={hosts}
index={index}
userInfo={userInfo}
navigation={navigation}
onSnapToItem={this.onSnapToItem}
/>
