英文:
Styling react app so second column aligns
问题
这是你要翻译的代码部分：
I have a react app where on a certain screen I list scores, like so:
Team 0
Team 0
Now this looks fine because both teams have the same number of characters. But not so here:
San Antonio 0
Dallas 0
What I want is to have the second column of the actual score values line up, regardless of the fact that the first column will have values with different character lengths, like so:
[![enter image description here][1]][1]
Not sure how to accomplish that with `flexbox`.
Here is my relevant component code:
const ScoresScreen = () => {
return (
<ScrollView>
<View style={styles.container}>
{SCORES.map((score) => (
<View key={uuid.v4()}>
<View style={styles.game} key={uuid.v4()}>
<Image
source={{
uri: getTeamLogo(score.team1),
}}
style={styles.logo}
resizeMode={'contain'}
/>
<Text style={styles.team}>{score.team1}</Text>
<Text style={styles.score}>{score.team1Score}</Text>
{score.team1Score > score.team2Score && (
<AntDesign style={styles.check} name='checkcircle' size={18} color={Colors.midGreen} />
)}
</View>
<View style={styles.game} key={uuid.v4()}>
<Image
source={{
uri: getTeamLogo(score.team2),
}}
style={styles.logo}
resizeMode={'contain'}
/>
<Text style={styles.team}>{score.team2}</Text>
<Text style={styles.score}>{score.team2Score}</Text>
{score.team1Score < score.team2Score && (
<AntDesign style={styles.check} name='checkcircle' size={16} color={Colors.midGreen} />
)}
</View>
<Divider></Divider>
</View>
))}
</View>
</ScrollView>
);
};
And here is my styling:
const styles = StyleSheet.create({
container: {
margin: 15,
},
game: {
flexDirection: 'row',
},
team: {
fontSize: 18,
},
logo: {
width: Dimensions.get('window').width * 0.05,
height: Dimensions.get('window').height * 0.05,
marginRight: 10,
marginTop: -10,
},
score: {
marginLeft: 30,
fontSize: 18,
},
check: {
marginLeft: 12,
marginTop: 3,
},
});
如果你有其他问题需要翻译，请提出。
英文:
I have a react app where on a certain screen I list scores, like so:
Team 0
Team 0
Now this looks fine because both teams have the same number of characters. But not so here:
San Antonio 0
Dallas 0
What I want is to have the second column of the actual score values line up, regardless of the fact that the first column will have values with different character lengths, like so:
Not sure how to accomplish that with flexbox.
Here is my relevant component code:
const ScoresScreen = () => {
return (
<ScrollView>
<View style={styles.container}>
{SCORES.map((score) => (
<View key={uuid.v4()}>
<View style={styles.game} key={uuid.v4()}>
<Image
source={{
uri: getTeamLogo(score.team1),
}}
style={styles.logo}
resizeMode={'contain'}
/>
<Text style={styles.team}>{score.team1}</Text>
<Text style={styles.score}>{score.team1Score}</Text>
{score.team1Score > score.team2Score && (
<AntDesign style={styles.check} name='checkcircle' size={18} color={Colors.midGreen} />
)}
</View>
<View style={styles.game} key={uuid.v4()}>
<Image
source={{
uri: getTeamLogo(score.team2),
}}
style={styles.logo}
resizeMode={'contain'}
/>
<Text style={styles.team}>{score.team2}</Text>
<Text style={styles.score}>{score.team2Score}</Text>
{score.team1Score < score.team2Score && (
<AntDesign style={styles.check} name='checkcircle' size={16} color={Colors.midGreen} />
)}
</View>
<Divider></Divider>
</View>
))}
</View>
</ScrollView>
);
};
And here is my styling:
const styles = StyleSheet.create({
container: {
margin: 15,
},
game: {
flexDirection: 'row',
},
team: {
fontSize: 18,
},
logo: {
width: Dimensions.get('window').width * 0.05,
height: Dimensions.get('window').height * 0.05,
marginRight: 10,
marginTop: -10,
},
score: {
marginLeft: 30,
fontSize: 18,
},
check: {
marginLeft: 12,
marginTop: 3,
},
});
答案1
得分: 1
我对React语法还不太熟悉，因为我正在学习它，但是flexbox的工作方式如下：如果你为第一列设置了固定宽度，第二列将具有正确的对齐。否则，我可能会尝试将这种布局的flexbox更改为具有两列的网格。因此，对齐应该直接工作，而无需更改其他任何内容。
英文:
I'm not yet familiar with React syntax as I'm learning it, but flexbox works in the following way: if you set a fixed width for your first column, the second column will have the correct alignment. Otherwise, I would maybe try to change the flexbox by a grid for such a layout, with two columns. Therefore, the alignment should work directly without changing anything else.
答案2
得分: 0
尝试使用
Justify-content: 'space-between'
这个CSS属性应该会使项目之间始终保持相同的间距。不要忘记为每个部分指定宽度，因为这是计算它们之间间距所需的。
英文:
Try using
Justify-content:'space-between'
This css property should align items to always have the same space between them. Don't forget to give width to each part, as it is needed to calculate the spaces between them.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论