Skip to content

F
FZUStudyRoom

软件工程实践2022年春W班 / 穿梭在银河的火箭队 / FZUStudyRoom

通知 12
Star 0
Fork 0
F
FZUStudyRoom

体验新版 GitCode，发现更多精彩内容 >>

提交 55c8b222 编写于 作者: ItbGcthate's avatar ItbGcthate
浏览文件
操作

Merge branch '139-frontend' of... 

Merge branch '139-frontend' of https://gitcode.net/SoftwareEngineering2022ClassW/noBug/fzustudyroom into 304-frontend
上级 bd8ae385 14274633
隐藏空白更改
内联 并排
Showing with 978 addition and 0 deletion
component/AloneRouter/index.js 0 → 100644
浏览文件 @ 55c8b222
import React, {Component} from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import Quota from '../AloneStudy/quota';
import Meditation from '../AloneStudy/meditation';
import Settlement from '../AloneStudy/settlement';
import JiShi from '../AloneStudy/JiShi';
import AloneHome from '../AloneStudy/AloneHome';
const {width, height} = Dimensions.get('window');
class AloneRouter extends Component {
constructor() {
super();
}
render() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer independent={true}>
<Stack.Navigator
screenOptions={{
headerTitleAlign: 'center',
headerTintColor: '#592202',
headerStyle: {
backgroundColor: '#CE9561',
},
headerTitleStyle: {
color: '#592202',
fontSize: 20,
fontWeight: 'bold',
},
}}>
<Stack.Screen name="联网自习" component={AloneHome} />
<Stack.Screen name="计时模式" component={JiShi} />
<Stack.Screen name="时间限额模式" component={Quota} />
<Stack.Screen name="禅定模式" component={Meditation} />
<Stack.Screen name="单机模式结算" component={Settlement} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default AloneRouter;
component/AloneStudy/AloneHome/index.js 0 → 100644
浏览文件 @ 55c8b222
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Image,
TouchableHighlight,
Pressable,
ImageBackground,
TouchableOpacity,
} from 'react-native';
import img from '../img/background1.png';
const {width, height} = Dimensions.get('window');
class AloneHome extends Component {
constructor() {
super();
}
CDing = () => {
this.props.navigation.navigate('禅定模式');
};
XianE = () => {
this.props.navigation.navigate('时间限额模式');
};
ZChang = () => {
this.props.navigation.navigate('计时模式');
};
render() {
return (
<View style={styles.container}>
<ImageBackground source={img} resizeMode="cover" style={styles.image}>
<View>
<Image style={styles.icon1} source={require('../img/xiane.png')} />
</View>
<View>
<Image style={styles.icon2} source={require('../img/jishi.png')} />
</View>
<View>
<Image style={styles.icon3} source={require('../img/quota.png')} />
</View>
<TouchableOpacity style={styles.button} onPress={this.XianE}>
<Text style={styles.text}>时间限额模式</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.ZChang}>
<Text style={styles.text}>计时模式</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.CDing}>
<Text style={styles.text}>禅定模式</Text>
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//opacity: 0.5,
flexDirection: 'column',
backgroundColor: '#FFFFFF',
},
text: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
image: {
flex: 1,
justifyContent: 'center',
width: null,
height: null,
},
icon1: {
position: 'absolute',
top: 17,
left: 60,
width: parseInt(width) / 4.5,
height: parseInt(width) / 4.5,
},
icon2: {
position: 'absolute',
top: 125,
left: 65,
width: parseInt(width) / 5.5,
height: parseInt(width) / 5.5,
},
icon3: {
position: 'absolute',
top: 215,
left: 55,
width: parseInt(width) / 5,
height: parseInt(width) / 4,
},
button: {
marginHorizontal: parseInt(width) / 2.5,
backgroundColor: '#BF7636',
marginBottom: 21,
marginTop: 21,
borderRadius: 32,
justifyContent: 'center',
width: parseInt(width) / 1.8,
height: parseInt(width) / 5.8,
//让安卓拥有灰色阴影
elevation: 8,
},
});
export default AloneHome;
component/AloneStudy/JiShi/index.js 0 → 100644
浏览文件 @ 55c8b222
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button';
class JiShi extends Component {
constructor(props) {
super(props);
this.state = {
data: 0,
data1: 0,
displayName: null,
tDisplay: 'none',
jDisplay: 'none',
sDisplay: 'none',
rDisplay: null,
state1: 0,
dao: 0,
};
this.s = 50;
this.f = 0;
this.s1 = 10;
this._timer = null;
}
countTime() {
this._timer = setInterval(() => {
if (this.state.state == 0) {
this.setState({
data: this.s++,
data1: this.f,
displayName: 'none',
tDisplay: null,
});
if (this.state.data == 59) {
this.f++;
this.s = 0;
}
} else if (this.state.state == 1) {
this.setState({
data: this.s1,
data1: this.state.dao,
displayName: 'none',
sDisplay: 'none',
tDisplay: null,
});
if (this.s1 == 0 && this.state.dao == 0) {
this.setState({sDisplay: 'none', jDisplay: null});
this._timer && clearInterval(this._timer);
} else if (this.state.data == 0) {
this.state.dao--;
this.s = 59;
} else {
this.s1--;
}
}
}, 1000);
}
stop() {
this.setState({tDisplay: 'none', jDisplay: null});
this._timer && clearInterval(this._timer);
}
settle() {
if (this.state.state == 0) {
this.props.navigation.navigate('单机模式结算', {data1: this.state.data1});
} else {
this.props.navigation.navigate('单机模式结算', {
data1: this.state.dao + 1,
});
}
}
onSelect(index, value) {
if (index == 1) {
this.setState({state: index, sDisplay: null, rDisplay: 'none'});
} else if (index == 0) {
this.setState({state: index});
}
}
onChangeText(inputData) {
this.setState({dao: inputData - 1});
}
render() {
return (
<View style={styles.container}>
<View style={styles.showTime}>
<Text style={styles.timeText}>
{this.state.data1} : {this.state.data}
</Text>
</View>
<View>
<Image style={styles.icon1} source={require('../img/jishi.png')} />
</View>
<View style={{display: this.state.displayName}}>
<TouchableOpacity
style={styles.button}
onPress={this.countTime.bind(this)}>
<Text style={styles.text}>开始</Text>
</TouchableOpacity>
<View style={{display: this.state.rDisplay}}>
<View style={styles.radio}>
<RadioGroup
onSelect={(index, value) => this.onSelect(index, value)}>
<RadioButton value={0}>
<Text style={styles.text}>正计时</Text>
</RadioButton>
<RadioButton value={1}>
<Text style={styles.text}>倒计时</Text>
</RadioButton>
</RadioGroup>
</View>
</View>
</View>
<View style={{display: this.state.tDisplay}}>
<TouchableOpacity
style={styles.prompt}
onPress={this.stop.bind(this)}>
<Text style={styles.text1}>结束</Text>
</TouchableOpacity>
</View>
<View style={{display: this.state.jDisplay}}>
<TouchableOpacity
style={styles.settle}
onPress={this.settle.bind(this)}>
<Text style={styles.text}>结算</Text>
</TouchableOpacity>
</View>
<View style={{display: this.state.sDisplay}}>
<TextInput
placeholder="请输入倒计时分钟"
underlineColorAndroid={'transparent'} //去掉下划线
placeholderTextColor={'#BF7636'}
editable={true}
style={styles.dao}
//将文本写入state
onChangeText={this.onChangeText.bind(this)}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F2E2CE',
//opacity: 0.5,
flex: 1,
},
text: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
text1: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
button: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3.4,
justifyContent: 'center',
borderRadius: 3,
alignItems: 'center',
width: parseInt(width) / 2.2,
height: parseInt(width) / 8,
},
button1: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 2,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
prompt: {
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
settle: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
showTime: {
height: 100,
position: 'absolute',
top: parseInt(height) / 6,
left: parseInt(width) / 2.6,
alignItems: 'center',
},
timeText: {
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
fontSize: 40,
},
icon1: {
position: 'absolute',
top: parseInt(height) / 3,
left: parseInt(width) / 3,
opacity: 0.5,
width: parseInt(width) / 2.8,
height: parseInt(width) / 2.8,
},
radio: {
position: 'absolute',
top: parseInt(height) / 1.8,
left: parseInt(width) / 3,
},
dao: {
height: 60,
borderWidth: 2,
marginTop: 20,
marginRight: 5,
marginLeft: 5,
paddingLeft: 5,
borderColor: '#c48c5d',
borderRadius: 4,
position: 'absolute',
top: parseInt(height) / 1.8,
left: parseInt(width) / 3.8,
},
});
export default JiShi;
component/AloneStudy/meditation/index.js 0 → 100644
浏览文件 @ 55c8b222
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button';
class Meditation extends Component {
constructor(props) {
super(props);
this.state = {
data: 0,
data1: 0,
displayName: null,
tDisplay: 'none',
jDisplay: 'none',
sDisplay: 'none',
rDisplay: null,
state1: 0,
dao: 0,
};
this.s = 50;
this.f = 0;
this.s1 = 10;
this._timer = null;
}
countTime() {
this._timer = setInterval(() => {
if (this.state.state == 0) {
this.setState({
data: this.s++,
data1: this.f,
displayName: 'none',
tDisplay: null,
});
if (this.state.data == 59) {
this.f++;
this.s = 0;
}
} else if (this.state.state == 1) {
this.setState({
data: this.s1,
data1: this.state.dao,
displayName: 'none',
sDisplay: 'none',
tDisplay: null,
});
if (this.s1 == 0 && this.state.dao == 0) {
this.setState({sDisplay: 'none', jDisplay: null});
this._timer && clearInterval(this._timer);
} else if (this.state.data == 0) {
this.state.dao--;
this.s = 59;
} else {
this.s1--;
}
}
}, 1000);
}
stop() {
this.setState({tDisplay: 'none', jDisplay: null});
this._timer && clearInterval(this._timer);
}
settle() {
if (this.state.state == 0) {
this.props.navigation.navigate('单机模式结算', {data1: this.state.data1});
} else {
this.props.navigation.navigate('单机模式结算', {
data1: this.state.dao + 1,
});
}
}
onSelect(index, value) {
if (index == 1) {
this.setState({state: index, sDisplay: null, rDisplay: 'none'});
} else if (index == 0) {
this.setState({state: index});
}
}
onChangeText(inputData) {
this.setState({dao: inputData - 1});
}
render() {
return (
<View style={styles.container}>
<View style={styles.showTime}>
<Text style={styles.timeText}>
{this.state.data1} : {this.state.data}
</Text>
</View>
<View>
<Image style={styles.icon1} source={require('../img/quota.png')} />
</View>
<View style={{display: this.state.displayName}}>
<TouchableOpacity
style={styles.button}
onPress={this.countTime.bind(this)}>
<Text style={styles.text}>开始</Text>
</TouchableOpacity>
<View style={{display: this.state.rDisplay}}>
<View style={styles.radio}>
<RadioGroup
onSelect={(index, value) => this.onSelect(index, value)}>
<RadioButton value={0}>
<Text style={styles.text}>正计时</Text>
</RadioButton>
<RadioButton value={1}>
<Text style={styles.text}>倒计时</Text>
</RadioButton>
</RadioGroup>
</View>
</View>
</View>
<View style={{display: this.state.tDisplay}}>
<TouchableOpacity
style={styles.prompt}
onPress={this.stop.bind(this)}>
<Text style={styles.text1}>结束</Text>
</TouchableOpacity>
</View>
<View style={{display: this.state.jDisplay}}>
<TouchableOpacity
style={styles.settle}
onPress={this.settle.bind(this)}>
<Text style={styles.text}>结算</Text>
</TouchableOpacity>
</View>
<View style={{display: this.state.sDisplay}}>
<TextInput
placeholder="请输入倒计时分钟"
underlineColorAndroid={'transparent'} //去掉下划线
placeholderTextColor={'#BF7636'}
editable={true}
style={styles.dao}
//将文本写入state
onChangeText={this.onChangeText.bind(this)}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F2E2CE',
//opacity: 0.5,
flex: 1,
},
text: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
text1: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
button: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3.4,
justifyContent: 'center',
borderRadius: 3,
alignItems: 'center',
width: parseInt(width) / 2.2,
height: parseInt(width) / 8,
},
button1: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 2,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
prompt: {
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
settle: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
showTime: {
height: 100,
position: 'absolute',
top: parseInt(height) / 6,
left: parseInt(width) / 2.6,
alignItems: 'center',
},
timeText: {
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
fontSize: 40,
},
icon1: {
position: 'absolute',
top: parseInt(height) / 3,
left: parseInt(width) / 3,
opacity: 0.5,
width: parseInt(width) / 2.8,
height: parseInt(width) / 2.8,
},
radio: {
position: 'absolute',
top: parseInt(height) / 1.8,
left: parseInt(width) / 3,
},
dao: {
height: 60,
borderWidth: 2,
marginTop: 20,
marginRight: 5,
marginLeft: 5,
paddingLeft: 5,
borderColor: '#c48c5d',
borderRadius: 4,
position: 'absolute',
top: parseInt(height) / 1.8,
left: parseInt(width) / 3.8,
},
});
export default Meditation;
component/AloneStudy/quota/index.js 0 → 100644
浏览文件 @ 55c8b222
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Image,
TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button';
class Quota extends Component {
constructor(props) {
super(props);
this.state = {
data: 0,
data1: 0,
displayName: null,
tDisplay: 'none',
jDisplay: 'none',
};
this.s = 50;
this.f = 0;
this._timer = null;
}
countTime() {
this._timer = setInterval(() => {
this.setState({
data: this.s++,
data1: this.f,
displayName: 'none',
tDisplay: null,
});
if (this.state.data == 59) {
this.f++;
this.s = 0;
}
}, 1000);
}
stop() {
this.setState({data: 0, data1: 0, tDisplay: 'none', jDisplay: null});
this._timer && clearInterval(this._timer);
}
settle() {
this.props.navigation.navigate('单机模式结算', {data1: this.state.data1});
}
render() {
return (
<View style={styles.container}>
<View style={styles.showTime}>
<Text style={styles.timeText}>
{this.state.data1} : {this.state.data}
</Text>
</View>
<View>
<Image style={styles.icon1} source={require('../img/xiane.png')} />
</View>
<View style={{display: this.state.displayName}}>
<TouchableOpacity
style={styles.button}
onPress={this.countTime.bind(this)}>
<Text style={styles.text}>开始</Text>
</TouchableOpacity>
</View>
<View style={{display: this.state.tDisplay}}>
<TouchableOpacity
style={styles.prompt}
onPress={this.stop.bind(this)}>
<Text style={styles.text1}>结束</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity style={styles.button1} onPress={this.ZChang}>
<Text style={styles.text}>白名单</Text>
</TouchableOpacity>
</View>
<View style={{display: this.state.jDisplay}}>
<TouchableOpacity
style={styles.settle}
onPress={this.settle.bind(this)}>
<Text style={styles.text}>结算</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F2E2CE',
//opacity: 0.5,
flex: 1,
},
text: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
text1: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
button: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
alignItems: 'center',
width: parseInt(width) / 2.2,
height: parseInt(width) / 8,
},
button1: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.7,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
prompt: {
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
settle: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
showTime: {
height: 100,
position: 'absolute',
top: parseInt(height) / 6,
left: parseInt(width) / 2.6,
alignItems: 'center',
},
timeText: {
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
fontSize: 40,
},
icon1: {
position: 'absolute',
top: parseInt(height) / 3,
left: parseInt(width) / 3,
opacity: 0.5,
width: parseInt(width) / 2.8,
height: parseInt(width) / 2.8,
},
radio: {
position: 'absolute',
top: parseInt(height) / 1.8,
left: parseInt(width) / 3,
},
});
export default Quota;
component/AloneStudy/settlement/index.js 0 → 100644
浏览文件 @ 55c8b222
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Image,
TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
class Settlement extends Component {
constructor(props) {
super(props);
}
settle() {}
render() {
const {params} = this.props.route;
return (
<View style={styles.container}>
<View style={styles.s}>
<Text style={styles.text}>本次自习结束</Text>
</View>
<View style={styles.t}>
<Text style={styles.text1}>
本次你一共学习了{params.data1}分钟
{'\n\n'}
获得20经验值{'\n\n'}
请再接再厉
</Text>
</View>
<View>
<TouchableOpacity
style={styles.button}
onPress={this.settle.bind(this)}>
<Text style={styles.text3}>结算</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F2E2CE',
//opacity: 0.5,
flex: 1,
},
text: {
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
color: '#C5844A',
},
text1: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#C5844A',
},
text3: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
},
s: {
backgroundColor: '#F4CB8C',
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
position: 'absolute',
top: parseInt(height) / 14,
left: parseInt(width) / 3,
justifyContent: 'center',
borderWidth: 2,
borderColor: '#C5844A',
},
t: {
backgroundColor: '#F4CB8C',
width: parseInt(width) / 1.5,
height: parseInt(width) / 1.2,
position: 'absolute',
top: parseInt(height) / 4,
left: parseInt(width) / 5,
justifyContent: 'center',
borderWidth: 2,
borderRadius: 20,
borderColor: '#C5844A',
},
button: {
backgroundColor: '#C5844A',
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 2.9,
justifyContent: 'center',
borderRadius: 3,
alignItems: 'center',
width: parseInt(width) / 2.8,
height: parseInt(width) / 7,
borderWidth: 3,
borderColor: '#BF7636',
},
button1: {
backgroundColor: '#c48c5d',
position: 'absolute',
top: parseInt(height) / 2,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
prompt: {
position: 'absolute',
top: parseInt(height) / 1.3,
left: parseInt(width) / 3,
justifyContent: 'center',
borderRadius: 3,
width: parseInt(width) / 2.5,
height: parseInt(width) / 8,
},
showTime: {
height: 100,
position: 'absolute',
top: parseInt(height) / 6,
left: parseInt(width) / 2.6,
alignItems: 'center',
},
timeText: {
fontWeight: 'bold',
textAlign: 'center',
color: '#592202',
fontSize: 40,
},
icon1: {
position: 'absolute',
top: parseInt(height) / 3,
left: parseInt(width) / 3,
opacity: 0.5,
width: parseInt(width) / 2.8,
height: parseInt(width) / 2.8,
},
radio: {
position: 'absolute',
top: parseInt(height) / 1.8,
left: parseInt(width) / 3,
},
});
export default Settlement;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或