screen 1
screen 2
Проверьте пример песочницы здесь: https://codesandbox.io/s/react-native-ylfe2?fbclid=IwAR3LoEbOVASVm3JttJnXJuSRbt_htb_A11XLHBj2WxgMT9efNn_7M6r0xQw
У меня есть перетаскиваниеКомпонент, который пользователь должен перетащить и оставить его рядом с ответом на запись. Я разделил экран на 3 вида или контейнера. Проблема в том, что когда пользователь перетаскивает ответ на 3-й вид / компонент, его уже невозможно отследить. Я думаю, что это из-за уровней zIndex, я пытался заставить zIndex работать, но безуспешно + я не могу использовать абсолютные позиции, это приведет к изменению дизайна, в котором я задал различные цвета фона.
render() {
return (
<View style={styles.mainContainer}>
<View style={styles.titleContainer}>
<Text style={styles.textlarge}>Match
<Text style={styles.text}> Match the image with the matching text :</Text>
</Text>
</View>
<View style={styles.imagesContainer}>
{/* images here */}
<Draggable style={styles.draggable} imageurl={require(drugs)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
<Draggable imageurl={require(nomobile)} moveY={140} moveX={80} answerId={2} qtrue={q2true} />
<Draggable imageurl={require(speedlimit)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
<Draggable imageurl={require(streetwork)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
</View>
<View style={styles.answersContainer}>
{/* answers here */}
<View style={styles.questionContainer}>
<View style={styles.dropZone}></View>
<View style={styles.questionTextContainer}>
<Text style={styles.questionTextLarge}>WE ALWAYS drive safely and legally: <Text style={styles.questionTextSmall}>we never use a handheld mobile device when driving</Text></Text>
</View>
</View>
<View style={styles.questionContainer}>
<View style={styles.dropZone}></View>
<View style={styles.questionTextContainer}>
<Text style={styles.questionTextLarge}>WE ALWAYS drive safely and legally: <Text style={styles.questionTextSmall}>we always obey the speed limit</Text></Text>
</View>
</View>
<View style={styles.questionContainer}>
<View style={styles.dropZone}></View>
<View style={styles.questionTextContainer}>
<Text style={styles.questionTextLarge}>WE NEVER <Text style={styles.questionTextSmall}>work under the influence of alcohol or drugs</Text></Text>
</View>
</View>
<View style={styles.questionContainer}>
<View style={styles.dropZone}></View>
<View style={styles.questionTextContainer}>
<Text style={styles.questionTextLarge}>NEVER <Text style={styles.questionTextSmall}>undertake any street or underground work activities unless competent to do so</Text></Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: DEVICE_WIDTH * 0.03,
backgroundColor: '#EE82EE',
zIndex: 1,
},
dropZone: {
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
borderStyle: "solid",
borderWidth: 3,
borderColor: "#cccccc",
borderRadius: CIRCLE_RADIUS,
zIndex: 1,
},
titleContainer: {
flexDirection: 'row',
backgroundColor: '#00BFFF',
flex: 2,
paddingTop: DEVICE_HEIGHT * 0.03,
flexWrap: 'wrap',
},
textlarge: {
fontSize: 28,
fontWeight: "bold",
fontStyle: "normal",
lineHeight: 25,
letterSpacing: 0,
color: "#e60000",
flexWrap: 'wrap',
},
text: {
fontSize: 21,
fontWeight: "bold",
fontStyle: "normal",
lineHeight: 25,
letterSpacing: 0,
color: "#4c464e",
flexWrap: 'wrap',
},
imagesContainer: {
backgroundColor: 'yellow',
flex: 2,
flexDirection: 'row',
justifyContent: 'space-between',
zIndex: 1,
},
answersContainer: {
flexDirection: 'column',
flex: 8,
zIndex: 1,
},
questionContainer: {
flexDirection: 'row',
flex: 1,
zIndex: 1,
},
questionTextContainer: {
flex: 3,
marginLeft: 10,
zIndex: 0,
},
questionTextLarge: {
flexWrap: 'wrap',
backgroundColor: '#C0C0C0',
fontSize: 16,
fontWeight: "bold",
fontStyle: "normal",
letterSpacing: 0,
color: "#4b464d",
},
questionTextSmall: {
flexWrap: 'wrap',
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 20,
letterSpacing: 0,
color: "#4b464d"
},
draggable: {
zIndex: 100,
position: 'absolute',
}
});