javascript - React 原生拖放位置足球训练
问题描述
我有这样一个东西,阵型是这么宣示的:
4-4-2:
[
[{}]//1
[{},{},{},{}...],//4
[{},{},{},{}...],//4
[{},{}...]//2
]
所以我做了两个嵌套循环,一个是从门滚动到中场的行(主数组内的数组数),一个是滚动每行的每个单独的玩家(单个数组行内的 obj 数)。到目前为止,它工作正常,我重复这件事,主队和客队都工作正常。
问题是我想应用拖放。我想做的是,最初球员的位置是从指定的训练开始的,然后能够移动场上的每一个球员,即使是在场上的对方部分。
关于我如何做到这一点的任何建议?
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ImageBackground } from 'react-native';
export default class FootballField extends Component {
constructor(props) {
super(props);
this.state = {
home: props.home,
away: props.away,
};
}
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('./images/footballfield.png')}
style={{
width: null,
height: null,
flex: 1,
}}>
<View style={{ backgroundColor: 'rgba(52, 52, 52, 0.45)', flex: 1 }}>
<View
style={{
flex: 1,
backgroundColor: 'rgba(204, 70, 43, 0)',
}}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={[
styles.text,
{
marginLeft: 20,
},
]}>
{this.state.home.module}
</Text>
<Text
style={[
styles.text,
{
position: 'absolute',
right: 20,
},
]}>
{this.state.home.name}
</Text>
</View>
{this.state.home.team.map((data, i) => (
<View style={styles.rowHome}>
{data.map((d, j) => (
<View style={styles.el}>
<View
style={{
flexDirection: 'row',
}}>
{this.state.home.home_team_events.map(
(el, z) =>
d.name == el.player &&
el.type_of_event == 'yellow-card' && (
<Image
source={require('./imagess/card-yellow.png')}
style={{
width: 12,
height: 15,
position: 'absolute',
left: -12,
}}
/>
)
)}
{this.state.home.home_team_events.map(
(el, z) =>
d.name == el.player &&
el.type_of_event == 'red-card' && (
<Image
source={require('./images/card-red.png')}
style={{
width: 12,
height: 15,
position: 'absolute',
left: -12,
}}
/>
)
)}
<View style={styles.playHome}>
<Text style={styles.text}>{d.number}</Text>
</View>
{this.state.home.home_team_events.map(
(el, z) =>
d.name == el.player &&
el.type_of_event == 'substitution-in' && (
<Image
source={require('./images/refresh.png')}
style={{
width: 12,
height: 12,
position: 'absolute',
right: -14,
}}
/>
)
)}
</View>
<Text style={styles.text}>{d.name}</Text>
</View>
))}
</View>
))}
</View>
<View
style={{
flex: 1,
backgroundColor: 'rgba(43, 99, 204, 0)',
paddingTop: 55,
}}>
{this.state.away.team.reverse().map((data, i) => (
<View style={styles.rowAway}>
{data.map((d, j) => (
<View style={styles.el}>
<Text style={styles.text}>{d.name}</Text>
<View
style={{
flexDirection: 'row',
}}>
{this.state.away.away_team_events.map(
(el, z) =>
d.name == el.player &&
el.type_of_event == 'yellow-card' && (
<Image
source={require('./images/card-yellow.png')}
style={{
width: 12,
height: 15,
position: 'absolute',
left: -12,
}}
/>
)
)}
{this.state.away.away_team_events.map(
(el, z) =>
d.name == el.player &&
el.type_of_event == 'red-card' && (
<Image
source={require('./images/card-red.png')}
style={{
width: 12,
height: 15,
position: 'absolute',
left: -12,
}}
/>
)
)}
<View style={styles.playAway}>
<Text style={styles.text}>{d.number}</Text>
</View>
{this.state.away.away_team_events.map(
(el, z) =>
d.name == el.player &&
el.type_of_event == 'substitution-in' && (
<Image
source={require('./images/refresh.png')}
style={{
width: 12,
height: 12,
position: 'absolute',
right: -14,
}}
/>
)
)}
</View>
</View>
))}
</View>
))}
<View
style={{
flexDirection: 'row',
}}>
<Text
style={[
styles.text,
{
marginLeft: 20,
},
]}>
{this.state.away.module}
</Text>
<Text
style={[
styles.text,
{
position: 'absolute',
right: 20,
},
]}>
{this.state.away.name}
</Text>
</View>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
rowHome: {
flex: 1,
flexDirection: 'row',
},
rowAway: {
flex: 1,
flexDirection: 'row',
},
el: {
flexGrow: 1,
alignItems: 'center',
},
playHome: {
justifyContent: 'center',
width: 30,
height: 30,
borderRadius: 15,
borderWidth: 2,
borderColor: 'rgb(244, 67, 54)',
backgroundColor: 'rgba(244, 67, 54,0.5)',
},
playAway: {
justifyContent: 'center',
width: 30,
height: 30,
borderRadius: 15,
borderWidth: 2,
borderColor: 'rgb(3, 169, 244)',
backgroundColor: 'rgba(3, 169, 244,0.5)',
},
text: {
textAlign: 'center',
fontWeight: 'bold',
color: '#fff',
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: { width: 0, height: 1 },
textShadowRadius: 1,
fontSize: 15,
},
});
解决方案
推荐阅读
- python - 为什么我的 QSplitter 的 QSplitterHandles 拒绝格式化?
- sql - 如何将数据集拆分为多个子集并将其导出到 Excel
- amazon-web-services - AWS IoT 设备在线/离线检查
- javascript - Firebase @firebase/数据库PERMISSION_DENIED
- firebase - 使用 firebase/firestore JS SDK 过滤掉文档 ID 子集的最佳方法?
- apache - `NameError: name 'TypeError' is not defined` 在 Apache (mod_wsgi)
- html - 如何制作一个角度弹出窗口?
- list - 如何通过应用于它们各自的第一个和第二个值的谓词过滤具有 (Int, Int) 值的元组列表?
- r - confint-南生产
- apache-kafka - 在 kafa 消费者应用程序中处理不同分区和偏移量上的重复项