В приведенном ниже коде я пытаюсь сделать 2 вещи:
- дать поле для каждой карты со значением: 20
- положить четыре карты только в одну строку ипозвольте пользователю сдвинуть их по горизонтали
Ни то, ни другое не работает, и код предназначен для этого.
Вот игровая площадка, поэтому вы можете проводить свои собственные эксперименты: бит.ly / 2V3KbKo
https://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/
Вот код (который вы также можете скопировать / вставить по ссылке выше):
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
export default class App extends React.Component {
render() {
return (
<ScrollView style={stylesApp.cardContainer}>
<MyCard index="514" black text="These are the news of Monday." style={stylesApp.myCard} />
<MyCard index="514" black text="These are the news of Tuesday." style={stylesApp.myCard} />
<MyCard index="514" black text="These are the news of Wednesday." style={stylesApp.myCard} />
<MyCard index="514" black text="These are the news of Thursday." style={stylesApp.myCard} />
</ScrollView>
);
}
}
const stylesApp = StyleSheet.create({
cardContainer: {
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'scroll',
},
myCard: {
margin: 20,
},
});
//------
class MyCard extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text,
};
}
render() {
return (
<View style={stylesMyCard.container}>
<Text style={stylesMyCard.text}>{this.state.text}</Text>
</View>
);
}
}
const stylesMyCard = StyleSheet.create({
container: {
width: 80,
minHeight: 40,
padding: 10,
backgroundColor: '#000',
alignItems: 'center',
},
text: {
color: '#fff',
fontSize: 10,
}
});
Любая идея о том, какзаставить эти две вещи работать должным образом?
Если можете, предоставьте рабочий исходный код.
Спасибо!