Skip to content

F
FZUStudyRoom

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

通知 12
Star 0
Fork 0
F
FZUStudyRoom

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

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

304_add2-PlayerPKState

上级 f1a3e1ec
隐藏空白更改
内联 并排
Showing with 494 addition and 60 deletion
component/OnlineStudy/2-PlayerPKHome/index.js
浏览文件 @ 27489f7d
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Image,
} from 'react-native';
import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
import Img1 from './img/img1.png';
import Img2 from './img/img2.png';
import MyButton from '../MyButton';
......@@ -29,6 +23,7 @@ class TwoPlayerPKHome extends Component {
start = () => {
this.props.navigation.navigate('双人PK中');
//console.log('1');
};
render() {
......@@ -37,7 +32,7 @@ class TwoPlayerPKHome extends Component {
<View style={styles.container}>
<Image source={isChanged ? Img2 : Img1} style={styles.image} />
<MyButton
style={styles.myButton}
containerStyle={styles.myButton.container}
title="开始"
onPressIn={this.in}
onPressOut={this.out}
......@@ -60,7 +55,9 @@ const styles = StyleSheet.create({
flex: 3,
},
myButton: {
flex: 1,
container: {
flex: 1,
},
},
});
......
component/OnlineStudy/2-PlayerPKState/index.js 0 → 100644
浏览文件 @ 27489f7d
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Pressable,
Image,
} from 'react-native';
import PropTypes from 'prop-types';
import Clock from './img/clock1.png';
const {width, height} = Dimensions.get('window');
class TwoPlayerPKState extends Component {
constructor() {
super();
}
static propTypes = {
isStarted: PropTypes.bool.isRequired,
time: PropTypes.string,
containerStyle: PropTypes.object,
buttonStyle: PropTypes.object,
insideStyle: PropTypes.object,
textStyle: PropTypes.object,
};
render() {
const {
containerStyle,
buttonStyle,
insideStyle,
textStyle,
time,
isStarted,
} = this.props;
return (
<View style={{...styles.container, ...containerStyle}}>
<Pressable style={{...styles.buttonStyle, ...buttonStyle}}>
<View style={{...styles.containerInside, ...insideStyle}}>
<Text style={{...styles.text, ...textStyle}}>
{isStarted ? '本局时长' : '寻找对手'}
</Text>
</View>
<View style={{...styles.containerTime}}>
<Text
style={{...styles.textTime}}
numberOfLines={1}
ellipsizeMode={'clip'}>
{isStarted ? time : '请稍等'}
</Text>
</View>
<Image source={Clock} style={styles.image} />
</Pressable>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
margin: 3,
},
containerInside: {
justifyContent: 'center',
borderWidth: 3,
borderColor: '#BF7636',
backgroundColor: '#F2E2CE',
//opacity: 0.5,
marginBottom: '20%',
flex: 1,
},
containerTime: {
justifyContent: 'center',
flex: 1,
},
text: {
fontSize: 18,
color: '#BF7636',
fontWeight: 'bold',
textAlign: 'center',
},
textTime: {
fontSize: 30,
color: '#BF7636',
fontWeight: '900',
textAlign: 'center',
},
image: {
marginTop: '20%',
opacity: 0.5,
flex: 2,
resizeMode: 'contain',
width: null,
height: null,
},
buttonStyle: {
borderRadius: 3,
flex: 1,
margin: 10,
},
});
export default TwoPlayerPKState;
component/OnlineStudy/2-PlayerPKStudy/index.js
浏览文件 @ 27489f7d
import '../GlobalSetting';
import React, {Component} from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import MyButton from '../MyButton';
import {View, Text, StyleSheet, Dimensions, Alert} from 'react-native';
import MyStatistics from '../MyStatistics';
import MyTitle from '../MyTitle';
import SettingButton from '../SettingButton';
import MyBanner from '../MyBanner';
import TwoPlayerPKState from "../2-PlayerPKState";
const {width, height} = Dimensions.get('window');
/**
* 标语风格切换共使用了组件：
* 1. GlobalSetting（引入global变量global.bannerStyle，来控制标语风格）
* 2. SettingButton
* 3. BannerStyle（在你的Navigator中引入）
* 4. MyButton（在BannerStyle组件中引入）
* 5. MyBanner
*
* 此外，还使用了：
* 1. componentDidMount
* 2. componentWillUnmount
*/
class TwoPlayerPKMode extends Component {
constructor(props) {
super(props);
this.props.navigation.setOptions({
constructor() {
super();
}
state = {
victories: 0,
isStarted: false,
timeInAGame: '95:48',
timeInAMatch: '199:80',
};
componentDidMount() {
const {navigation} = this.props;
navigation.setOptions({
// 引入SettingButton组件至header的右边
// 并把this.props传给SettingButton组件以实现Navigation的跳转
headerRight: () => <SettingButton {...this.props} />,
});
this.unsubscribe = navigation.addListener('focus', () => {
// Screen was focused
// Do something
// 强制刷新组件，读取最新的global.bannerStyle
this.forceUpdate();
});
}
componentWillUnmount() {
this.unsubscribe();
}
finish = () => {
Alert.alert('结算确认', '您确定要结束PK并结算成绩吗？', [
{
text: '取消',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{text: '是的', onPress: () => console.log('OK Pressed')},
]);
};
render() {
const {victories, isStarted, timeInAGame, timeInAMatch} = this.state;
return (
<View style={styles.container}>
<MyTitle
title={'您已战胜' + '1' + '人'}
title={'您已战胜' + victories.toString() + '人'}
style={styles.containerTitle}
/>
<View style={styles.containerMain}>
<MyStatistics />
<View style={styles.containerInCentre}>
<Text style={styles.text}>Study自习模块</Text>
</View>
<TwoPlayerPKState isStarted={isStarted} time={timeInAGame} />
<MyStatistics
containerStyle={styles.containerOnRight}
insideStyle={styles.containerInRightColumn}
......@@ -35,14 +80,12 @@ class TwoPlayerPKMode extends Component {
/>
</View>
<View style={styles.containerTimer}>
<Text style={styles.textTimer}>09:15</Text>
<Text style={styles.textTimer}>{timeInAMatch}</Text>
</View>
<MyButton
style={styles.myButton}
<MyBanner
containerStyle={styles.myButton.container}
title={'结算'}
onPress={() => {
return console.log(global.bannerStyle);
}}
onPress={this.finish}
/>
</View>
);
......@@ -64,6 +107,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
},
containerTimer: {
justifyContent: 'center',
flex: 1,
flexDirection: 'row',
},
......@@ -78,12 +122,6 @@ const styles = StyleSheet.create({
textOnRight: {
color: '#f4cb8c',
},
containerInCentre: {
borderWidth: 3,
backgroundColor: '#F2E2CE',
//opacity: 0.5,
flex: 1,
},
textTimer: {
textAlignVertical: 'center',
flex: 1,
......@@ -98,7 +136,9 @@ const styles = StyleSheet.create({
textAlign: 'center',
},
myButton: {
flex: 2,
container: {
flex: 2,
},
},
});
......
component/OnlineStudy/BannerStyle/index.js
浏览文件 @ 27489f7d
......@@ -10,6 +10,11 @@ class BannerStyle extends Component {
super();
}
/**
* return a function to change global.bannerStyle
* @param num
* @returns {(function(): void)|*}
*/
changeBannerStyle = num => {
return () => {
global.bannerStyle = num;
......@@ -22,21 +27,25 @@ class BannerStyle extends Component {
<View style={styles.container}>
<MyButton
title={'模式1'}
{...styles.myButton1}
onPress={this.changeBannerStyle(1)}
disabled={global.bannerStyle === 1}
/>
<MyButton
title={'模式2'}
{...styles.myButton2}
onPress={this.changeBannerStyle(2)}
disabled={global.bannerStyle === 2}
/>
<MyButton
title={'模式3'}
{...styles.myButton3}
onPress={this.changeBannerStyle(3)}
disabled={global.bannerStyle === 3}
/>
<MyButton
title={'模式4'}
{...styles.myButton4}
onPress={this.changeBannerStyle(4)}
disabled={global.bannerStyle === 4}
/>
......@@ -51,6 +60,62 @@ const styles = StyleSheet.create({
//opacity: 0.5,
flex: 1,
},
myButton1: {
textEnabled: {
color: '#bf7636',
},
buttonStyle: {
width: '75%',
borderRadius: 15,
borderWidth: 2,
},
buttonEnabled: {
backgroundColor: '#f7e2c3',
borderColor: '#c98c55',
},
},
myButton2: {
textEnabled: {
color: '#60bed9',
},
buttonStyle: {
width: '75%',
borderRadius: 15,
borderWidth: 2,
},
buttonEnabled: {
backgroundColor: '#daeae7',
borderColor: '#70d1e7',
},
},
myButton3: {
textEnabled: {
color: '#ee8bc0',
},
buttonStyle: {
width: '75%',
borderRadius: 15,
borderWidth: 2,
},
buttonEnabled: {
backgroundColor: '#f9dbe4',
borderColor: '#fbb9df',
},
},
myButton4: {
textEnabled: {
color: '#d75c4b',
},
buttonStyle: {
width: '75%',
borderRadius: 15,
borderWidth: 2,
},
buttonEnabled: {
backgroundColor: '#f1b2a6',
borderColor: '#e76051',
},
},
});
export default BannerStyle;
component/OnlineStudy/GlobalSetting/index.js
浏览文件 @ 27489f7d
global.bannerStyle = 1;
global.bannerStyle = 1; //标语风格的代号
component/OnlineStudy/MyBanner/index.js 0 → 100644
浏览文件 @ 27489f7d
import '../GlobalSetting';
import React, {Component} from 'react';
import {StyleSheet, Dimensions, View} from 'react-native';
import PropTypes from 'prop-types';
import MyButton from '../MyButton';
const {width, height} = Dimensions.get('window');
class MyBanner extends Component {
constructor() {
super();
}
componentWillUnmount() {
clearInterval(this.timer);
}
state = {isButtonVisible: false};
static propTypes = {
containerStyle: PropTypes.object,
buttonStyle: PropTypes.object,
textStyle: PropTypes.object,
buttonEnabled: PropTypes.object,
textEnabled: PropTypes.object,
buttonDisabled: PropTypes.object,
textDisabled: PropTypes.object,
title: PropTypes.string,
onPressIn: PropTypes.func,
onPressOut: PropTypes.func,
onPress: PropTypes.func,
disabled: PropTypes.bool,
};
chooseBannerStyle = () => {
switch (global.bannerStyle) {
case 1:
return styles.bannerStyle1;
case 2:
return styles.bannerStyle2;
case 3:
return styles.bannerStyle3;
case 4:
return styles.bannerStyle4;
default:
break;
}
};
clickOnBanner = () => {
this.setState({isButtonVisible: true});
};
pressOutBanner = () => {
this.timer = setTimeout(() => {
//执行代码
this.setState({isButtonVisible: false});
}, 5000);
};
render() {
const {
containerStyle,
buttonStyle,
textStyle,
buttonEnabled,
textEnabled,
buttonDisabled,
textDisabled,
title,
onPressIn,
onPressOut,
onPress,
disabled,
} = this.props;
const myButton = {
buttonStyle,
textStyle,
buttonEnabled,
textEnabled,
buttonDisabled,
textDisabled,
title,
onPressIn,
onPressOut,
onPress,
disabled,
};
const container = {...styles.container, ...containerStyle};
const bannerStyle = this.chooseBannerStyle();
const banner = {
containerStyle: styles.containerStyle,
textEnabled: bannerStyle.textEnabled,
textDisabled: bannerStyle.textDisabled,
textStyle: styles.textStyle,
buttonEnabled: bannerStyle.buttonEnabled,
buttonDisabled: bannerStyle.buttonDisabled,
buttonStyle: styles.buttonStyle,
title: '别盯着手机看了',
};
return (
<View style={container}>
{this.state.isButtonVisible ? (
<MyButton {...myButton} />
) : (
<MyButton
{...banner}
onPress={this.clickOnBanner}
onPressOut={this.pressOutBanner}
/>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
flex: 1,
}, //for component
containerStyle: {
justifyContent: 'center',
flex: 1,
}, //for banner
bannerStyle1: {
textEnabled: {
color: '#bf7636',
},
textDisabled: {
color: '#a0a0a0',
},
buttonEnabled: {
backgroundColor: '#f7e2c3',
borderColor: '#c98c55',
},
buttonDisabled: {
backgroundColor: '#e6e6e6',
borderColor: '#D6D6D6',
},
},
bannerStyle2: {
textEnabled: {
color: '#60bed9',
},
textDisabled: {
color: '#a0a0a0',
},
buttonEnabled: {
backgroundColor: '#daeae7',
borderColor: '#70d1e7',
},
buttonDisabled: {
backgroundColor: '#e6e6e6',
borderColor: '#D6D6D6',
},
},
bannerStyle3: {
textEnabled: {
color: '#ee8bc0',
},
textDisabled: {
color: '#a0a0a0',
},
buttonEnabled: {
backgroundColor: '#f9dbe4',
borderColor: '#fbb9df',
},
buttonDisabled: {
backgroundColor: '#e6e6e6',
borderColor: '#D6D6D6',
},
},
bannerStyle4: {
textEnabled: {
color: '#d75c4b',
},
textDisabled: {
color: '#a0a0a0',
},
buttonEnabled: {
backgroundColor: '#f1b2a6',
borderColor: '#e76051',
},
buttonDisabled: {
backgroundColor: '#e6e6e6',
borderColor: '#D6D6D6',
},
},
textStyle: {
flex: 1,
fontSize: parseInt(height) / 23,
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'center',
},
buttonStyle: {
alignSelf: 'center',
height: parseInt(height) / 8,
width: '80%',
borderRadius: 10,
borderWidth: 4,
},
});
export default MyBanner;
component/OnlineStudy/MyButton/index.js
浏览文件 @ 27489f7d
......@@ -16,7 +16,13 @@ class MyButton extends Component {
}
static propTypes = {
style: PropTypes.object,
containerStyle: PropTypes.object,
buttonStyle: PropTypes.object,
textStyle: PropTypes.object,
buttonEnabled: PropTypes.object,
textEnabled: PropTypes.object,
buttonDisabled: PropTypes.object,
textDisabled: PropTypes.object,
title: PropTypes.string,
onPressIn: PropTypes.func,
onPressOut: PropTypes.func,
......@@ -25,18 +31,39 @@ class MyButton extends Component {
};
render() {
const {style, title, onPressIn, onPressOut, onPress, disabled} = this.props;
const {
containerStyle,
buttonStyle,
textStyle,
buttonEnabled,
textEnabled,
buttonDisabled,
textDisabled,
title,
onPressIn,
onPressOut,
onPress,
disabled,
} = this.props;
const container = {...styles.container, ...containerStyle};
const buttonDefault = {...styles.buttonStyle, ...buttonStyle};
const textDefault = {...styles.textStyle, ...textStyle};
const button = disabled
? {...buttonDefault, ...styles.buttonDisabled, ...buttonDisabled}
: {...buttonDefault, ...styles.buttonEnabled, ...buttonEnabled};
const text = disabled
? {...textDefault, ...styles.textDisabled, ...textDisabled}
: {...textDefault, ...styles.textEnabled, ...textEnabled};
return (
<View style={{...styles.container, ...style}}>
<View style={container}>
<TouchableOpacity
disabled={disabled}
style={disabled ? styles.buttonDisabled : styles.buttonStyle}
style={button}
onPressIn={onPressIn}
onPressOut={onPressOut}
onPress={onPress}>
<Text style={disabled ? styles.textDisabled : styles.textInButton}>
{title}
</Text>
<Text style={text}>{title}</Text>
</TouchableOpacity>
</View>
);
......@@ -48,39 +75,33 @@ const styles = StyleSheet.create({
justifyContent: 'center',
flex: 1,
},
textEnabled: {
color: '#592202',
},
textDisabled: {
flex: 1,
fontSize: parseInt(height) / 23,
color: '#a0a0a0',
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'center',
},
textInButton: {
textStyle: {
flex: 1,
fontSize: parseInt(height) / 23,
color: '#592202',
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'center',
},
buttonEnabled: {
backgroundColor: '#e1c3a1',
borderColor: '#BF7636',
},
buttonDisabled: {
alignSelf: 'center',
backgroundColor: '#e6e6e6',
height: parseInt(height) / 8,
width: '50%',
borderRadius: 40,
borderWidth: 4,
borderColor: '#D6D6D6',
},
buttonStyle: {
alignSelf: 'center',
backgroundColor: '#e1c3a1',
height: parseInt(height) / 8,
width: '50%',
borderRadius: 40,
borderWidth: 4,
borderColor: '#BF7636',
},
});
......
component/OnlineStudy/MyStatistics/index.js
浏览文件 @ 27489f7d
......@@ -54,6 +54,7 @@ const styles = StyleSheet.create({
margin: 3,
},
containerInside: {
justifyContent: 'center',
borderWidth: 3,
borderColor: '#BF7636',
backgroundColor: '#F2E2CE',
......
component/OnlineStudy/SettingButton/index.js
浏览文件 @ 27489f7d
......@@ -3,13 +3,14 @@ import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native';
import Setting from './img/setting.png';
class SettingButton extends Component {
//SettingButton组件需要props（如navigation，router等）以实现Navigation的跳转（必要）
constructor() {
super();
}
openSetting = () => {
//console.log(this);
this.props.navigation.navigate('标语风格切换');
this.props.navigation.navigate('标语风格切换'); //指向BannerStyle组件
};
render() {
......
component/OnlineStudy/index.js
浏览文件 @ 27489f7d
......@@ -14,10 +14,6 @@ class OnlineStudy extends Component {
super();
}
// componentDidMount() {
// console.log(this);
// }
render() {
const Stack = createNativeStackNavigator();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或